Animated Modal Login Form

Submitted by rinvizle on Wednesday, November 16, 2016 - 16:27.
In this tutorial we will show you how to create a Animated Modal Login Form for your system. This simple system shows you the popping up of login form by triggering or clicking the login button. And this is compose of PHP, Bootsrap and Javascript, this programs are written in a way that any one can understand and customize for their projects.

Sample Code

Index.php - This script of code is for the general output of the system for creating a modal form. 
  1. <!DOCTYPE html>
  2. <html>
  3. <title>Animated Modal Login Form</title>
  4. 	<link rel="stylesheet" href="css/style.css">
  5. <body>
  6. <ul>
  7.   <li class="namelog"><a href="https://wwww.sourcecodester.com">Sourcecodester</a></li>
  8.   <li><a style="margin-left: 15px;">Animated Modal Login Form</a></li>
  9.   <li><a href="#login" onclick="document.getElementById('id01').style.display='block'" style="width:auto; margin-left:25px" class="login">Login</a></li>
  10. </ul>
  11. <div id="id01" class="modal">
  12.   <form class="modal-content animate" action="action_page.php">
  13.     <div class="imgcontainer">
  14.       <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
  15.       <img src="images/logo.png" alt="Avatar" class="avatar">
  16.     </div>
  17.     <div class="container">
  18.       <label><b>Username</b></label>
  19.       <input type="text" placeholder="Enter Username" name="uname" required>
  20.       <label><b>Password</b></label>
  21.       <input type="password" placeholder="Enter Password" name="psw" required>
  22.       <button type="submit">Login</button>
  23.       <input type="checkbox"> Remember me
  24.       <span class="sign" style="margin-left: 70px;"><a href="signup.php"> Sign Up</a></span>
  25.     </div>
  26.     <div class="container" style="background-color:#f1f1f1">
  27.       <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
  28.       <span class="psw">Forgot <a href="#">Password?</a></span>
  29.     </div>
  30.   </form>
  31. </div>
  32. <script>
  33. var modal = document.getElementById('id01');
  34. window.onclick = function(event) {
  35.     if (event.target == modal) {
  36.         modal.style.display = "none";
  37.     }
  38. }
  39. </script>
  40. </body>
  41. </html>
Style.css - And for the style and design of the modal to make it more responsive. 
  1. input[type=text], input[type=password] {
  2.     width: 100%;
  3.     padding: 12px 20px;
  4.     margin: 8px 0;
  5.     display: inline-block;
  6.     border: 1px solid #ccc;
  7.     box-sizing: border-box;
  8. }
  9. button {
  10.     background-color: #5388bf;
  11.     color: white;
  12.     padding: 14px 20px;
  13.     margin: 8px 0;
  14.     border: none;
  15.     cursor: pointer;
  16.     width: 100%;
  17. }
  18. .cancelbtn {
  19.     width: auto;
  20.     padding: 10px 18px;
  21.     background-color: #ca0e00;
  22. }
  23. .imgcontainer {
  24.     text-align: center;
  25.     margin: 24px 0 12px 0;
  26.     position: relative;
  27. }
  28. img.avatar {
  29.     width: 100%;
  30.     border-radius: 50%;
  31. }
  32. .container {
  33.     padding: 16px;
  34. }
  35. span.psw {
  36.     float: right;
  37.     padding-top: 16px;
  38. }
  39. .modal {
  40.     display: none;
  41.     position: fixed;
  42.     z-index: 1;
  43.     left: 0;
  44.     top: 0;
  45.     width: 100%;
  46.     height: 100%;
  47.     overflow: auto;
  48.     background-color: rgb(0,0,0);
  49.     background-color: rgba(0,0,0,0.4);
  50.     padding-top: 60px;
  51. }
  52. .modal-content {
  53.     background-color: #fefefe;
  54.     margin: 5% auto 15% auto;
  55.     border: 1px solid #888;
  56. 	border-radius: 5px;
  57.     width: 35%;
  58. }
  59. .close {
  60.     position: absolute;
  61.     right: 25px;
  62.     top: 0;
  63.     color: #000;
  64.     font-size: 35px;
  65.     font-weight: bold;
  66. }
  67. .close:hover,
  68. .close:focus {
  69.     color: red;
  70.     cursor: pointer;
  71. }
  72. .animate {
  73.     -webkit-animation: animatezoom 0.6s;
  74.     animation: animatezoom 0.6s
  75. }
  76. @-webkit-keyframes animatezoom {
  77.     from {-webkit-transform: scale(0)}
  78.     to {-webkit-transform: scale(1)}
  79. }
  80. @keyframes animatezoom {
  81.     from {transform: scale(0)}
  82.     to {transform: scale(1)}
  83. }
  84. @media screen and (max-width: 300px) {
  85.     span.psw {
  86.        display: block;
  87.        float: none;
  88.     }
  89. 	span.sign {
  90.        display: block;
  91.        float: none;
  92.     }
  93.     .cancelbtn {
  94.        width: 100%;
  95.     }
  96. }
  97. body {margin:0;}
  98.  
  99. ul {
  100.     list-style-type: none;
  101.     margin: 0;
  102.     padding: 0;
  103.     overflow: hidden;
  104.     background-color: #5388bf;
  105.     position: fixed;
  106.     top: 0;
  107.     width: 100%;
  108. }
  109.  
  110. li {
  111.     float: left;
  112. }
  113.  
  114. li a {
  115.     display: block;
  116.     color: white;
  117.     padding: 16px;
  118.     text-decoration: none;
  119. 	margin-left: 385px;
  120. }
  121. .login {
  122.     display: block;
  123.     color: white;
  124.     text-decoration: none;
  125. 	float:right;
  126. 	background-color:green;
  127. }
  128. .namelog {
  129. 	background-color:cadetblue;
  130. }
Hope that you learn in this tutorial. And for more updates and programming tutorials don't hesitate to ask and we will answer your questions and suggestions. Don't forget to LIKE & SHARE this website.

Tags

Add new comment

About text formats
  • 441 views