时间戳

首页 > 解决方案 > 使用 Javascript 将显示设置为无

javascript - 使用 Javascript 将显示设置为无

问题描述

我似乎无法使关闭按钮起作用。我正在为多个图像制作一个动态脚本，通过单击弹出一个模式，然后用关闭按钮关闭。显示属性以外的任何东西都可以，但我不知道该怎么做

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";
  }

标签： javascript

解决方案

这是因为您点击的.modalclose气泡最多.activities。所以你得到了这个效果：

  1. 点击.modalclose
  2. 关闭模态函数执行
  3. 事件冒泡最多.activities
  4. 点击事件再次执行.activities
  5. 模态再次显示

要查看此效果，请添加console.log()到您的每个功能

您必须传入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>

推荐阅读