How To Create a Modal Login Type
Use the next javascript to shut the modal by clicking exterior of the modal content material (and never simply through the use of the “x” or “cancel” button to shut it):
|
1 |
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>physique {font-family: Arial, Helvetica, sans-serif;}/* Full-width enter fields */enter[type=text], enter[type=password] {width: 100%;padding: 12px 20px;margin: 8px 0;show: inline-block;border: 1px stable #ccc;box-sizing: border-box;}/* Set a method for all buttons */button {background-color: #4CAF50;colour: white;padding: 14px 20px;margin: 8px 0;border: none;cursor: pointer;width: 100%;}button:hover {opacity: 0.8;}/* Additional types for the cancel button */.cancelbtn {width: auto;padding: 10px 18px;background-color: #f44336;}/* Heart the picture and place the shut button */.imgcontainer {text-align: heart;margin: 24px 0 12px 0;place: relative;}img.avatar {width: 40%;border-radius: 50%;}.container {padding: 16px;}span.psw {float: proper;padding-top: 16px;}/* The Modal (background) */.modal {show: none; /* Hidden by default */place: mounted; /* Keep in place */z-index: 1; /* Sit on prime */left: 0;prime: 0;width: 100%; /* Full width */top: 100%; /* Full top */overflow: auto; /* Allow scroll if wanted */background-color: rgb(0,0,0); /* Fallback colour */background-color: rgba(0,0,0,0.4); /* Black w/ opacity */padding-top: 60px;}/* Modal Content material/Field */.modal-content {background-color: #fefefe;margin: 5% auto 15% auto; /* 5% from the highest, 15% from the underside and centered */border: 1px stable #888;width: 80%; /* Might be roughly, relying on display screen dimension */}/* The Shut Button (x) */.shut {place: absolute;proper: 25px;prime: 0;colour: #000;font-size: 35px;font-weight: daring;}.shut:hover,.shut:focus {colour: crimson;cursor: pointer;}/* Add Zoom Animation */.animate {-webkit-animation: animatezoom 0.6s;animation: animatezoom 0.6s}@-webkit-keyframes animatezoom {from {-webkit-transform: scale(0)}to {-webkit-transform: scale(1)}}@keyframes animatezoom {from {remodel: scale(0)}to {remodel: scale(1)}}/* Change types for span and cancel button on further small screens */@media display screen and (max-width: 300px) {span.psw {show: block;float: none;}.cancelbtn {width: 100%;}}</style></head><body><h2>Modal Login Type</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">&instances;</span><img src="img_avatar2.png" alt="Avatar" class="avatar"></div><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"> Keep in mind 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 modalvar modal = document.getElementById('id01');// When the user clicks anywhere outside of the modal, close itwindow.onclick = function(event) {if (event.target == modal) {modal.style.display = "none";}}</script></body></html> |
