Javascript：style.display =“ none”不起作用，而style.display =“ visible”起作用

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" 默认情况下， modal class具有display="none"

The style.display="visible"; style.display="visible"; is executed onclick by calling function show(id); 通过调用show(id);函数在onclick上执行show(id);

On clicking close(X) icon hide(id); 单击close(X) icon hide(id); is called but style.display="none"; 被称为，但是style.display="none"; has no effect and modal doesn't hide. 没有效果，模态也不会隐藏。

Please answer in simple Javascript only. 请仅使用简单的Javascript回答。

Code: https://jsfiddle.net/abhaygc/zymkv1wq/ 代码： 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');">&times;</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');">&times;</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');">&times;</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');">&times;</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>

Answer 1

It happens because of event bubbling . 这是由于event bubbling而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 . 这意味着，当您单击“ X”按钮时，将调用onclick="hide('cns')"并将display属性设置为none 。

Then the event bubbles up to the product element which in turn calls its own onclick method. 然后事件冒泡到product元素，后者又调用其自己的onclick方法。 And that causes the modal to appear again. 这导致模态再次出现。

You could stop the event propagation by changing the current onclick to 您可以通过将当前onclick更改为来停止事件传播

onclick="hide('cns');event.stopPropagation()"

Or you could move the modal outside of the product element: 或者，您可以将模态移到product元素之外：

<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');">&times;</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"

Answer 2

i've updated it in fiddle, you may want to check it: https://jsfiddle.net/zymkv1wq/28/ 我已经在小提琴中更新了它，您可能需要检查一下： 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');">&times;</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. 您将<div id="cns" class="modal">放在此div <div class="product-1 product" onclick="show('cns');">里面，其中具有onclick回调。

so basically, when the cms modal shows up and you click the close button, you click the parent div too. 因此，基本上，当cms模态出现并单击关闭按钮时，您也会单击父div。 which is forcing it to show again. 迫使它再次显示。 try this, i only change the cns one; 试试这个，我只更改cns ；

<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');">&times;</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 . 注意show()现在在类image 。

if you want to debug your previous code, try to put console.log('something') inside show() in your JS file too. 如果要调试以前的代码，请尝试将console.log('something')放入JS文件的show()内。 when you open ur modal, and click close button, you gonna see log from show() too 当您打开模态并单击close按钮时，您也会从show()查看日志

Javascript：style.display =“ none”不起作用，而style.display =“ visible”起作用

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-08-19 16:06:16

解决方案2
1 2018-08-19 16:22:14

Javascript：style.display =“ none”不起作用，而style.display =“ visible”起作用

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-08-19 16:06:16

解决方案2 1 2018-08-19 16:22:14

解决方案1
1 已采纳 2018-08-19 16:06:16

解决方案2
1 2018-08-19 16:22:14