Javascript: style.display=“none” not working whereas style.display=“visible” works
Question
I am trying to create Modal structure for a product catalog. The Modal appears whenever the user clicks on product name.
By default modal class has display="none"
The style.display="visible"; is executed onclick by calling function show(id);
On clicking close(X) icon hide(id); is called but style.display="none"; has no effect and modal doesn't hide.
Please answer in simple Javascript only.
Code: https://jsfiddle.net/abhaygc/zymkv1wq/
Code Snippet:
function show(id) { var modal = document.getElementById(id); modal.style.display="block"; } function hide(id){ var close = document.getElementById(id); console.log("It's here."); close.style.display="none"; }
body{ height: 100vh; margin: 0px; overflow-y: scroll; } .header{ background-color: white; height:8%; overflow: hidden; font-style: "Roboto"; font-size: 25px; border-bottom: 2px solid; border-bottom-color: #cccccc; } #clear{ clear: both; } .logo{ margin-top: 12px; float: left; left: 0px; padding-right: 50px; } #logo:hover{ background: transparent; } .links{ display: block; float: right; margin-right: 10px; margin-top: 10px; } a{ position: relative; right: 0px; /*top: 25px;*/ padding-left: 10px; padding-right: 10px; color:black; letter-spacing: 2px; font-weight: 200; text-decoration: none; } a:hover{ background-color:#cccccc; } .content{ display: block; background-color: white; height: 92%; margin-top: 0px; font-family: 'Roboto'; } #clear{ clear: both; } .image{ display: block; cursor: pointer; width: 300px; height: 150px; background-color: #cccccc; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4); overflow: hidden; } .product-1{ display: block; position: relative; padding-left: 20%; padding-right: 0%; margin-top: 5%; float: left; left: 0px; width: 50%; overflow: hidden; box-sizing: border-box; border-style: none; border-color: black; border-width: 1px; } .product-2{ display: block; position: relative; padding-left: 10%; padding-right: 0%; margin-top: 5%; float: right; right:0px; /* float: left; /*Q1 left: 25px; */ width: 50%; overflow: hidden; box-sizing: border-box; border-style: none; border-color: black; border-width: 1px; } .product-title{ display: block; text-align: center; margin-top: 50px; color:rgb(26, 115, 232); font-size: 50px; } .modal{ display: none; position: fixed; left: 0px; right: 0px; top: 0px; z-index: 1; background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.8); /* Black w/ opacity */ color:black; /*color:rgb(26, 115, 232);*/ width: 100%; height: 100%; } .modal-body{ display: block; position: relative; left: 35%; top: 10%; font-size: 45px; } .close{ display: block; cursor: pointer; float: right; right: 10px; font-size: 60px; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'> <link rel="stylesheet" type="text/css" href="products.css"> <title>Products</title> </head> <body> <div class="header"> <div class="logo"> <a href="home.html"><img id="logo"src="logo.png" alt="LOGO"></a> </div> <div class="links"> <a href="home.html">Home</a> <a href="products.html">Products</a> <a href="login.html">Login</a> <a href="register.html">Register</a> <a href="home.html">Contact</a> <a href="home.html">About</a> </div> </div> <div class="content"> <div class="product-1 product" onclick="show('cns');"> <div class="image"> <span class="product-title">CNS</span> </div> <div id="cns" class="modal"> <div class="modal-head"> CNS <span class="close" onclick="hide('cns');">×</span> </div> <div class="modal-body"> <ol> <li>CNS First Product</li> <li>CNS Second Product</li> <li>CNS Third Product</li> <li>CNS Fourth Product</li> </ol> </div> </div> </div> <div class="product-2 product" onclick="show('laser');"> <div class="image"> <span class="product-title">Laser Cut</span> </div> <div id="laser" class="modal"> <div class="modal-head"> Laser Cut <span class="close" onclick="hide('laser');">×</span> </div> <div class="modal-body"> <ol> <li>Laser First Product</li> <li>Laser Second Product</li> <li>Laser Third Product</li> <li>Laser Fourth Product</li> </ol> </div> </div> </div> <div id="clear"></div> <div class="product-1 product" onclick="show('rubber');"> <div class="image"> <span class="product-title">Rubber roller</span> </div> <div id="rubber" class="modal"> <div class="modal-head"> Rubber roller <span class="close" onclick="hide('rubber');">×</span> </div> <div class="modal-body"> <ol> <li>Rubber First Product</li> <li>Rubber Second Product</li> <li>Rubber Third Product</li> <li>Rubber Fourth Product</li> </ol> </div> </div> </div> <div class="product-2 product" onclick="show('fixture');"> <div class="image"> <span class="product-title">Fixture</span> </div> <div id="fixture" class="modal"> <div class="modal-head"> Fixture <span class="close" onclick="hide('fixture');">×</span> </div> <div class="modal-body"> <ol> <li>Fixture First Product</li> <li>Fixture Second Product</li> <li>Fixture Third Product</li> <li>Fixture Fourth Product</li> </ol> </div> </div> </div> </div> </body> <script type="text/javascript" src="products.js"></script> </html>
2 answers
solution1
1 ACCPTED 2018-08-19 16:06:16
It happens because of event bubbling .
It means that when you click on the 'X' button, the onclick="hide('cns')" is called and the display property is set to none .
Then the event bubbles up to the product element which in turn calls its own onclick method. And that causes the modal to appear again.
You could stop the event propagation by changing the current onclick to
onclick="hide('cns');event.stopPropagation()"
Or you could move the modal outside of the product element:
<div class="product-1 product" onclick="show('cns');">
<div class="image">
<span class="product-title">CNS</span>
</div>
</div>
<div id="cns" class="modal">
<div class="modal-head">
CNS
<span class="close" onclick="hide('cns');">×</span>
</div>
<div class="modal-body">
<ol>
<li>CNS First Product</li>
<li>CNS Second Product</li>
<li>CNS Third Product</li>
<li>CNS Fourth Product</li>
</ol>
</div>
</div>
To see that the display property is actually changed and then changed back, you could do the following:
function hide(id) {
var close = document.getElementById(id);
close.style.display="none";
console.log(close.style.display);
setTimeout(() => {console.log(close.style.display);});
}
# would print:
"none"
"block"
solution2
1 2018-08-19 16:22:14
i've updated it in fiddle, you may want to check it: https://jsfiddle.net/zymkv1wq/28/
the key is in these lines.
<div class="product-1 product" onclick="show('cns');">
<div class="image">
<span class="product-title">CNS</span>
</div>
<div id="cns" class="modal">
<div class="modal-head">
CNS
<span class="close" onclick="hide('cns');">×</span>
</div>
<div class="modal-body">
<ol>
<li>CNS First Product</li>
<li>CNS Second Product</li>
<li>CNS Third Product</li>
<li>CNS Fourth Product</li>
</ol>
</div>
</div>
</div>
do you see? you put your <div id="cns" class="modal"> inside this div <div class="product-1 product" onclick="show('cns');"> which has an onclick callback on it.
so basically, when the cms modal shows up and you click the close button, you click the parent div too. which is forcing it to show again. try this, i only change the cns one;
<div class="product-1 product">
<div class="image" onclick="show('cns');">
<span class="product-title">CNS</span>
</div>
<div id="cns" class="modal">
<div class="modal-head">
CNS
<span class="close" onclick="hide('cns');">×</span>
</div>
<div class="modal-body">
<ol>
<li>CNS First Product</li>
<li>CNS Second Product</li>
<li>CNS Third Product</li>
<li>CNS Fourth Product</li>
</ol>
</div>
</div>
</div>
notice that the show() is now on class image .
if you want to debug your previous code, try to put console.log('something') inside show() in your JS file too. when you open ur modal, and click close button, you gonna see log from show() too
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.