Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <h2>Modal Login Form</h2>
- <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
- <div id="id01" class="modal">
- <form class="modal-content animate" action="/action_page.php">
- <div class="imgcontainer">
- <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
- <div class="container">
- <label for="uname"><b>Username</b></label>
- <input type="text" placeholder="Enter Username" name="uname" required>
- <label for="psw"><b>Password</b></label>
- <input type="password" placeholder="Enter Password" name="psw" required>
- <button type="submit">Login</button>
- <label>
- <input type="checkbox" checked="checked" name="remember"> Remember me
- </label>
- </div>
- <div class="container" style="background-color:#f1f1f1">
- <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
- <span class="psw">Forgot <a href="#">password?</a></span>
- </div>
- </form>
- </div>
- <script>
- // Get the modal
- var modal = document.getElementById('id01');
- // When the user clicks anywhere outside of the modal, close it
- window.onclick = function(event) {
- if (event.target == modal) {
- modal.style.display = "none";
- }
- }
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement