Jump to content

Modal form display not being set to none on click


jake

Recommended Posts

 

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%;
    }
}


 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

You can only have one onclick event per element, having multiple will cause one to overide the other, plus the idea is to set ALL events on the loading of page, not when a specific condition is  met, later on. With a single event you can then check for multiple conditions before making adjustments to specific elements.

Link to comment
Share on other sites

7 hours ago, dsonesuk said:

plus the idea is to set ALL events on the loading of page, not when a specific condition is  met, later on. With a single event you can then check for multiple conditions before making adjustments to specific elements.

3

What do you mean?

Link to comment
Share on other sites

Events such as click, mouseover, mouseout are added to elements when page is fully loaded and the targeted elements exist, even inline events onclick="dothis()" are added when the element exist as the page is rendered from top to bottom. As mentioned multiple identical events targeting same elements will be overriding by the last, so a single event on which you can check multiple conditions as in

if (event.target == modal) {
        modal.style.display = "none";
    }

And

if (event.target == login) {
       login.style.display = "none";
    }

Can be carried out under the same event targeting the same element (window), if true carry out required adjustment 'login.style.display = "none";' else ignore move to next.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...