Tuesday, 22 December 2015

bootstrap login Window (one Page application)

<html lang="en">

 <head>
<!-- Latest compiled and minified CSS -->
 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

 <!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

 <!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 <meta charset="utf-8">

 <meta name="viewport" content="width=device-width, initial-scale=1">

 </head>

<body>

<div class="container">

<div class="col-sm-12">

<a href="#"  class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" >Edit</a>

</div>


<div class="modal fade" id="myModal" role="dialog">

    <div class="modal-dialog">

    

      <!-- Modal content-->

      <div class="modal-content">

        <div class="modal-header">

          <button type="button" class="close" data-dismiss="modal">&times;</button>

          <h4 class="modal-title">Lgin</h4>

        </div>

        <div class="modal-body">

        <!-- Your working area -->

        <div class="row">

       <div class="col-sm-3">&nbsp;</div>

       <div class="col-sm-3">UserName:</div>

       <div class="col-sm-3"><input type="text"  id="UserName"  /></div>

       <div class="col-sm-3">&nbsp;</div>

        </div>

        <div class="row">

       <div class="col-sm-3">&nbsp;</div>

       <div class="col-sm-3">Password:</div>

       <div class="col-sm-3"><input type="password"  id="password" /></div>

       <div class="col-sm-3">&nbsp;</div>

        </div>

        </div>

 

        <!-- Your working area -->

                </div>

        <div class="modal-footer">

          <button type="button" class="btn btn-default btn-xs" data-dismiss="modal" id="cls">Close</button>

           <button type="button" class="btn btn-info btn-xs"  id="lgin">Login</button>

        </div>

      </div>

      

    </div>

  </div>

  </div>

</body>

</html>

It looks as....

Edit
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)