使用 Javascript 將顯示設置為無

Question

我似乎無法使關閉按鈕起作用。 我正在為多個圖像制作一個動態腳本，通過單擊彈出一個模式，然后用關閉按鈕關閉。 顯示屬性以外的任何東西都可以，但我不知道該怎么做

 function reply_click(clicked_id) { var mc = document.getElementById(clicked_id).getElementsByTagName("div")[1]; mc.style.display = "block"; } function hide() { var divsToHide = document.getElementsByClassName("modalcont"); for (var i = 0; i < divsToHide.length; i++) { divsToHide[i].style.display = "none"; } }

 .modalwrap { position: relative; }.atooltip { position: absolute; opacity: 0; bottom: 106%; right: 0; left: 0; text-align: center; background: black; padding: 10px 0; color: white; border-radius: 5px; width: auto; font-size: 16px; transition: opacity 0.5s; }.atooltip::after { content: ""; position: absolute; top: 100%; left: 50%; right: 50%; border-width: 10px; border-style: solid; border-color: black transparent transparent transparent; }.mimg:hover+.atooltip { opacity: 1; transition: opacity 0.5s; }.modalcont { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); position: fixed; top: 0; left: 0; overflow-y: scroll; z-index: 999999; display: none; }.modalclose { padding: 5px 12px 5px; border-radius: 25px; border: 0; font-size: 26px; font-weight: 700; background-color: #d25f40; color: white; position: absolute; right: -10px; top: -10px; display: block; }.mainmodal { background: white; width: 90%; padding: 1% 10px 1%; max-width: 550px; border-radius: 20px; margin: 5% auto 0; position: relative; text-align: center; }.modaltitle { font-size: 30px; margin: 3% 0; font-weight: 700; }.modaldetails { font-size: 16px; line-height: 1.75; text-align: justify; width: 85%; margin: 0 auto; }.modalcontent.modalclose:active {}

 <div class="modalwrap"> <div id="SCwrap" class="activities" onclick="reply_click(this.id)"> <img class="mimg" src="https://dash.csmgclientstaging.com//wp-content/uploads/2021/02/activities-icon-sailboat.png" /> <div class="atooltip">Lorem Imsum</div> <div class="modalcont"> <div class="mainmodal"> <button type="button" onclick="hide()" class="modalclose">&times;</button> <img src="https://dash.csmgclientstaging.com/wp-content/uploads/2021/03/activities-icon-sailboat-hover-300x300.png" width="150" height="150" /> <div class="modaltitle">Lorem Imsum</div> <div class="modaldetails"> <p>Lorem Imsum</p> </div> </div> </div> </div> </div>

這是我的 w3 鏈接https://www.w3schools.com/code/tryit.asp?filename=GR500WC1MPQJ 。 請幫忙

---

更新：使用父節點修復它。

function reply_click(clicked_id)
  {
      var mc = document.getElementById(clicked_id).parentNode;
      var cm = mc.getElementsByTagName("div")[1];
      cm.style.display = "block";
  }

Answer 1

這是因為您點擊.modalclose冒泡到.activities 。 所以你得到了這個效果：

1. 點擊.modalclose
2. 關閉模態 function 執行
3. 事件冒泡到.activities
4. 點擊事件在.activities上再次執行
5. 模態再次顯示

要查看此效果，請將console.log()添加到您的每個函數中

您必須在 function 調用中傳遞event ，然后執行event.stopPropagation()

 var toggler = true; function reply_click(clicked_id) { console.log('Show'); var mc = document.getElementById(clicked_id).getElementsByTagName("div")[1]; mc.style.display = "block"; } function hide(e) { console.log('Hide'); if (toggler) { e.stopPropagation(); } var divsToHide = document.getElementsByClassName("modalcont"); for (var i = 0; i < divsToHide.length; i++) { divsToHide[i].style.display = "none"; } } function toggleEvent() { toggler =;toggler. document.getElementById('on-off')?innerHTML = toggler: 'ON'; 'OFF'; }

 .modalwrap { position: relative; }.atooltip { position: absolute; opacity: 0; bottom: 106%; right: 0; left: 0; text-align: center; background: black; padding: 10px 0; color: white; border-radius: 5px; width: auto; font-size: 16px; transition: opacity 0.5s; }.atooltip::after { content: ""; position: absolute; top: 100%; left: 50%; right: 50%; border-width: 10px; border-style: solid; border-color: black transparent transparent transparent; }.mimg:hover+.atooltip { opacity: 1; transition: opacity 0.5s; }.modalcont { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); position: fixed; top: 0; left: 0; overflow-y: scroll; z-index: 999999; display: none; }.modalclose { padding: 5px 12px 5px; border-radius: 25px; border: 0; font-size: 26px; font-weight: 700; background-color: #d25f40; color: white; position: absolute; right: -10px; top: -10px; display: block; }.mainmodal { background: white; width: 90%; padding: 1% 10px 1%; max-width: 550px; border-radius: 20px; margin: 5% auto 0; position: relative; text-align: center; }.modaltitle { font-size: 30px; margin: 3% 0; font-weight: 700; }.modaldetails { font-size: 16px; line-height: 1.75; text-align: justify; width: 85%; margin: 0 auto; }.modalcontent.modalclose:active {}

 <button onClick="toggleEvent()">Toggle event cancel: <span id='on-off'>ON</span></button> <div class="modalwrap"> <div id="SCwrap" class="activities" onclick="reply_click(this.id)"> <img class="mimg" src="https://dash.csmgclientstaging.com//wp-content/uploads/2021/02/activities-icon-sailboat.png" /> <div class="atooltip">Lorem Imsum</div> <div class="modalcont"> <div class="mainmodal"> <button type="button" onclick="hide(event)" class="modalclose">&times;</button> <img src="https://dash.csmgclientstaging.com/wp-content/uploads/2021/03/activities-icon-sailboat-hover-300x300.png" width="150" height="150" /> <div class="modaltitle">Lorem Imsum</div> <div class="modaldetails"> <p>Lorem Imsum</p> </div> </div> </div> </div> </div>