How To Create a Modal Login Kind
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 strong #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;}/* Further kinds for the cancel button */.cancelbtn {width: auto;padding: 10px 18px;background-color: #f44336;}/* Middle the picture and place the shut button */.imgcontainer {text-align: middle;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: fastened; /* Keep in place */z-index: 1; /* Sit on prime */left: 0;prime: 0;width: 100%; /* Full width */peak: 100%; /* Full peak */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 strong #888;width: 80%; /* May very well be kind of, relying on display 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: pink;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 {rework: scale(0)}to {rework: scale(1)}}/* Change kinds for span and cancel button on additional small screens */@media display and (max-width: 300px) {span.psw {show: block;float: none;}.cancelbtn {width: 100%;}}</style></head><body><h2>Modal Login Kind</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> |
