Jump to content

jake

Members
  • Posts

    3
  • Joined

  • Last visited

jake's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. This worked, thank you very much. What led you to this solution? Is there something specific about the window.onclick function that prevents two from being used in the same script?
  2. Hello everyone, I am trying to make my first website and have been going through some javascript examples on W3S to learn how to make a website more interactive. I have been looking at the code for modal login and signup forms found here: https://www.w3schools.com/howto/howto_css_login_form.asp and here: https://www.w3schools.com/howto/howto_css_signup_form.asp The HTML and CSS are easy enough to understand I think, but I seem to be having some trouble with the JS aspect of the tutorials. What I have done is simply add both forms to an HTML document, linked to the styling and that seems to be working fine. The problem is when I click outside of the form the display for the modal forms should be set to none by the javascript code but this only works for one button. I have been able to rearrange some of the code so the second button works but then the first button wouldn't work. I have the code listed below. I've been trying this for a few days and would really like some help. Thanks in advance. HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Website3</title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="login.css"> </head> <body> <div id="outerMain"> <div id="main"> <header> <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button> <button onclick="document.getElementById('id02').style.display='block'" style="width:auto;">Sign Up</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">&times;</span> <img src="logo.png" alt="Avatar" class="avatar"> </div> <div class="container"> <label><b>Username</b></label> <input type="text" placeholder="Enter Username" name="uname" required> <label><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" required> <button type="submit">Login</button> <input type="checkbox" checked="checked"> Remember me </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> <div id="id02" class="modal"> <form class="modal-content animate" action="/action_page.php"> <div class="imgcontainer"> <span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">&times;</span> </div> <div class="container"> <label><b>Email</b></label> <input type="text" placeholder="Enter Email" name="email" required> <label><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" required> <label><b>Repeat Password</b></label> <input type="password" placeholder="Repeat Password" name="psw-repeat" required> <input type="checkbox" checked="checked"> Remember me <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p> <div class="clearfix"> <button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">Cancel</button> <button type="submit" class="signupbtn">Sign Up</button> </div> </div> </form> </div> <script src="scripts.js"> </script> </header> <section> <center><img src="centerimg.png" alt=""></center> </section> </div> </div> <footer> <center>HERE IS THE FOOTER!!</center> </footer> </body> </html> Javascript: var login = document.getElementById('id01'); var modal = document.getElementById('id02'); console.log(login); console.log(modal); if(login == document.getElementById('id01')){ console.log(login); window.onclick = function(event) { if (event.target == login) { login.style.display = "none"; } }; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }; CSS: html,body{ height: 100%; } #outerMain { min-height: 100%; } #main{ overflow: auto; padding-bottom: 100px; background-color: green; } header{ background-color: blue; } /* Full-width input fields */ input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } /* Set a style for all buttons */ button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; } button:hover { opacity: 0.8; } /* Extra styles for the cancel button */ .cancelbtn { width: auto; padding: 10px 18px; background-color: #f44336; } /* Center the image and position the close button */ .imgcontainer { text-align: center; margin: 24px 0 12px 0; position: relative; } img.avatar { width: 40%; border-radius: 50%; } .container { padding: 16px; } span.psw { float: right; padding-top: 16px; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ padding-top: 60px; } /* Modal Content/Box */ .modal-content { background-color: #fefefe; margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */ border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ } /* The Close Button (x) */ .close { position: absolute; right: 25px; top: 0; color: #000; font-size: 35px; font-weight: bold; } .close:hover, .close:focus { color: red; 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 {transform: scale(0)} to {transform: scale(1)} } /* Change styles for span and cancel button on extra small screens */ @media screen and (max-width: 300px) { span.psw { display: block; float: none; } .cancelbtn { width: 100%; } }
×
×
  • Create New...