Last active
August 29, 2015 14:26
-
-
Save amanurat/950e5e3df3f0c7636216 to your computer and use it in GitHub Desktop.
login-modal
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
<style> | |
.modal-header, h4, .close { | |
background-color: #5cb85c; | |
color:white !important; | |
text-align: center; | |
font-size: 30px; | |
} | |
.modal-footer { | |
background-color: #f9f9f9; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<h2>Modal Login Example</h2> | |
<!-- Trigger the modal with a button --> | |
<button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button> | |
<!-- Modal --> | |
<div class="modal fade" id="myModal" role="dialog"> | |
<div class="modal-dialog"> | |
<!-- Modal content--> | |
<div class="modal-content"> | |
<div class="modal-header" style="padding:35px 50px;"> | |
<button type="button" class="close" data-dismiss="modal">×</button> | |
<h4><span class="glyphicon glyphicon-lock"></span> Login</h4> | |
</div> | |
<div class="modal-body" style="padding:40px 50px;"> | |
<form role="form"> | |
<div class="form-group"> | |
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label> | |
<input type="text" class="form-control" id="usrname" placeholder="Enter email"> | |
</div> | |
<div class="form-group"> | |
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label> | |
<input type="text" class="form-control" id="psw" placeholder="Enter password"> | |
</div> | |
<div class="checkbox"> | |
<label><input type="checkbox" value="" checked>Remember me</label> | |
</div> | |
<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button> | |
</form> | |
</div> | |
<div class="modal-footer"> | |
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button> | |
<p>Not a member? <a href="#">Sign Up</a></p> | |
<p>Forgot <a href="#">Password?</a></p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script> | |
$(document).ready(function(){ | |
$("#myBtn").click(function(){ | |
$("#myModal").modal(); | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment