Created
September 9, 2017 05:49
-
-
Save Mauryashubham/afd88d754fc0e5aba049be2dfe636d6f to your computer and use it in GitHub Desktop.
How to make a pop up form using bootstrap
This file contains hidden or 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
| /** | |
| @author : Shubham Maurya, | |
| Email id : [email protected] | |
| ** | |
| 1.Make a file named index.html and save the code below | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <link rel="stylesheet" type="text/css" href="pop.css"> | |
| </head> | |
| <body> | |
| <a href="#" data-toggle="modal" data-target="#login-modal">Login</a> | |
| <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"> | |
| <div class="modal-dialog"> | |
| <div class="loginmodal-container"> | |
| <h1>Login to Your Account</h1><br> | |
| <form> | |
| <input type="text" name="user" placeholder="Username"> | |
| <input type="password" name="pass" placeholder="Password"> | |
| <input type="submit" name="login" class="login loginmodal-submit" value="Login"> | |
| </form> | |
| <div class="login-help"> | |
| <a href="#">Register</a> - <a href="#">Forgot Password</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or 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
| 1.Make a file named pop.css and save the code below@import url(http://fonts.googleapis.com/css?family=Roboto); | |
| /****** LOGIN MODAL ******/ | |
| .loginmodal-container { | |
| padding: 30px; | |
| max-width: 350px; | |
| width: 100% !important; | |
| background-color: #F7F7F7; | |
| margin: 0 auto; | |
| border-radius: 2px; | |
| box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); | |
| overflow: hidden; | |
| font-family: roboto; | |
| } | |
| .loginmodal-container h1 { | |
| text-align: center; | |
| font-size: 1.8em; | |
| font-family: roboto; | |
| } | |
| .loginmodal-container input[type=submit] { | |
| width: 100%; | |
| display: block; | |
| margin-bottom: 10px; | |
| position: relative; | |
| } | |
| .loginmodal-container input[type=text], input[type=password] { | |
| height: 44px; | |
| font-size: 16px; | |
| width: 100%; | |
| margin-bottom: 10px; | |
| -webkit-appearance: none; | |
| background: #fff; | |
| border: 1px solid #d9d9d9; | |
| border-top: 1px solid #c0c0c0; | |
| /* border-radius: 2px; */ | |
| padding: 0 8px; | |
| box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| } | |
| .loginmodal-container input[type=text]:hover, input[type=password]:hover { | |
| border: 1px solid #b9b9b9; | |
| border-top: 1px solid #a0a0a0; | |
| -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); | |
| -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); | |
| box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); | |
| } | |
| .loginmodal { | |
| text-align: center; | |
| font-size: 14px; | |
| font-family: 'Arial', sans-serif; | |
| font-weight: 700; | |
| height: 36px; | |
| padding: 0 8px; | |
| /* border-radius: 3px; */ | |
| /* -webkit-user-select: none; | |
| user-select: none; */ | |
| } | |
| .loginmodal-submit { | |
| /* border: 1px solid #3079ed; */ | |
| border: 0px; | |
| color: #fff; | |
| text-shadow: 0 1px rgba(0,0,0,0.1); | |
| background-color: #4d90fe; | |
| padding: 17px 0px; | |
| font-family: roboto; | |
| font-size: 14px; | |
| /* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#4787ed)); */ | |
| } | |
| .loginmodal-submit:hover { | |
| /* border: 1px solid #2f5bb7; */ | |
| border: 0px; | |
| text-shadow: 0 1px rgba(0,0,0,0.3); | |
| background-color: #357ae8; | |
| /* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#357ae8)); */ | |
| } | |
| .loginmodal-container a { | |
| text-decoration: none; | |
| color: #666; | |
| font-weight: 400; | |
| text-align: center; | |
| display: inline-block; | |
| opacity: 0.6; | |
| transition: opacity ease 0.5s; | |
| } | |
| .login-help{ | |
| font-size: 12px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment