Javascript：style.display="none" 无效，而 style.display="visible" 有效

Question

我正在尝试为产品目录创建模态结构。每当用户点击产品名称时，模态框就会出现。

默认情况下 modal class 有 display="none"

style.display="visible";通过调用函数show(id);

执行onclick

单击 close(X) icon 时会调用 hide(id);，但 style.display="none"; 无效且模态框不会隐藏。

请简单回答Javascript。

代码：https://jsfiddle.net/abhaygc/zymkv1wq/

代码片段：

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

它的发生是因为 event bubbling.

意思是当你点击'X'按钮时，调用onclick="hide('cns')"并将显示属性设置为none。

然后事件冒泡到 product 元素，后者又调用它自己的 onclick 方法。这会导致模态再次出现。

您可以通过将当前 onclick 更改为

来停止事件传播

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

或者您可以将模式移动到 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>

要查看显示属性实际上已更改然后又更改回来，您可以执行以下操作：

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

我已经在 fiddle 中更新了它，您可能需要检查它： https://jsfiddle.net/zymkv1wq/28/

关键就在这几行中。

<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 id="cns" class="modal"> 放在这个 div <div class="product-1 product" onclick="show('cns');"> 里面，上面有一个 onclick 回调。

所以基本上，当 cms 模态出现并且您单击关闭按钮时，您也单击父 div。这迫使它再次显示。试试这个，我只更改 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>

注意 show() 现在 class image。

如果你想调试你以前的代码，试着把 console.log('something') 放在你的 JS 文件的 show() 里面。当您打开您的模态并单击 close 按钮时，您也会看到来自 show() 的日志

Javascript：style.display="none" 无效，而 style.display="visible" 有效

Javascript: style.display="none" not working whereas style.display="visible" works

html

javascript

css

modal-dialog

display