Javascript: style.display="none" не работает, тогда как style.display="visible" работает

Я пытаюсь создать модальную структуру для каталога товаров. Модал появляется всякий раз, когда пользователь нажимает на название продукта.

По умолчанию modal class имеет display="none"

style.display="visible"; выполняется onclick вызывая функцию show(id);

При нажатии close(X) iconhide(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>

Источник

2 ответа

Решение

Это происходит из-за event bubbling,

Это означает, что когда вы нажимаете кнопку "X", onclick="hide('cns')" вызывается и свойство display устанавливается в 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>

Чтобы увидеть, что свойство display на самом деле изменяется, а затем изменяется обратно, вы можете сделать следующее:

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"
Источник

Я обновил его в скрипке, вы можете проверить это: 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 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() сейчас в классе image,

если вы хотите отладить свой предыдущий код, попробуйте поставить console.log('something') внутри show() в вашем файле JS тоже. когда вы откроете ваш модальный, и нажмите close Кнопка, вы увидите журнал от show() тоже

Источник
Другие вопросы по тегам