Question

我已经复制了一些js（我在我的网站上使用的js）并将其放在代码笔中，并且一切正常，但我希望弹出窗口不仅在用户点击“ X”（现在可以），但也可以在主要内容区域（.lion .wrap）之外单击。

非常感谢您！乔莉

我在网上找到了这个文件：https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_close-的功能与我希望的完全相同，但是我尝试将代码合并到我正在使用的js中，但是根本不具备将其获取的技能工作。我已经尝试了一切，并认为也许有人可以帮助我！

https://codepen.io/rjhodges/pen/LopoJp

var body = document.body,
    lionoverlay = document.querySelector('.lion'),
    lionoverlayBtts = document.querySelectorAll('button[class$="lion"]');

[].forEach.call(lionoverlayBtts, function(btt) {

  btt.addEventListener('click', function() { 

     /* Detect the button class name */
     var lionoverlayOpen = this.className === 'open-lion';

     /* Toggle the aria-hidden state on the overlay and the 
        no-scroll class on the body */
     lionoverlay.setAttribute('aria-hidden', !lionoverlayOpen);
     body.classList.toggle('noscroll', lionoverlayOpen);

     /* On some mobile browser when the overlay was previously
        opened and scrolled, if you open it again it doesn't 
        reset its scrollTop property after the fadeout */
     setTimeout(function() {
         lionoverlay.scrollTop = 0;              }, 1000)

  }, false);

});

如代码笔所显示的，单击“ X”时，该框将按预期关闭，但是我希望当用户单击主要内容区域（.lion.wrap）之外时，该框也将关闭

Answer 1

将此添加到脚本的底部：

// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
  if (event.target == lionoverlay) {
    lionoverlay.setAttribute('aria-hidden', true);
  }
}

var body = document.body,
  lionoverlay = document.querySelector('.lion'),
  lionoverlayBtts = document.querySelectorAll('button[class$="lion"]');

[].forEach.call(lionoverlayBtts, function(btt) {

  btt.addEventListener('click', function() {

    /* Detect the button class name */
    var lionoverlayOpen = this.className === 'open-lion';

    /* Toggle the aria-hidden state on the overlay and the 
       no-scroll class on the body */
    lionoverlay.setAttribute('aria-hidden', !lionoverlayOpen);
    body.classList.toggle('noscroll', lionoverlayOpen);

    /* On some mobile browser when the overlay was previously
       opened and scrolled, if you open it again it doesn't 
       reset its scrollTop property after the fadeout */
    setTimeout(function() {
      lionoverlay.scrollTop = 0;
    }, 1000)

  }, false);

});

// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
  if (event.target == lionoverlay) {
    lionoverlay.setAttribute('aria-hidden', true);
  }
}

li {
  list-style: none;
}

button.open-lion {
  background: none!important;
  border: none;
  color: #1a1a1a;
  cursor: pointer;
  font-family: 'Raleway', Arial, Helvetica, sans-serif;
  font-size: 11px;
  padding: 0;
  text-decoration: none;
  text-transform: none;
  &:hover {
    color: #898989;
    text-decoration: none;
  }
}

button.close-lion {
  background: none!important;
  border: none;
  color: #1a1a1a;
  font-size: 30px;
  height: 30px;
  line-height: 30px;
  padding: 0;
  position: absolute;
  right: 20px;
  text-transform: none;
  top: 20px;
  transition: 0;
  width: 30px;
}

button.close-lion:hover {
  background: none;
  color: #898989;
}

.noscroll {
  overflow: hidden;
}

.lion {
  background: rgba(247, 247, 247, 0.75);
  bottom: 0;
  left: 0;
  overflow-y: scroll;
  overscroll-behavior: contain!important;
  position: fixed;
  right: 0;
  text-align: left;
  top: 0;
  /*transition: opacity 0s!important;*/
}

#lionID[aria-hidden="true"] {
  opacity: 0;
  width: 100vw;
  z-index: -1;
}

#lionID[aria-hidden="false"] {
  opacity: 1;
  width: 100%;
  z-index: 1510;
}

.lion .wrap {
  background: #ffffff;
  left: 50%;
  margin-bottom: 60px;
  max-width: 800px;
  padding: 45px;
  position: absolute;
  top: 60px;
  transform: translateX(-50%);
  width: 85%;
}

<div class="detail-buttons-wrap">
  <div class="detail-buttons">
    <ul>
      <li><button type="button" class="open-lion">Sizing</button></li>
    </ul>
  </div>

  <section id="lionID" class="lion" aria-hidden="true">
    <div class="wrap">
      <button type="button" class="close-lion">X</button> CONTENT of LION will be here.
    </div>
  </section>
</div>

如何也可以通过在主要内容区域之外单击来关闭此弹出窗口？

1 个答案: