我怎样才能通过在主要内容区域之外单击来关闭此弹出窗口？

Question

我已经复制了一些 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);

});

因此，正如 codepen 所展示的那样，单击 '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>

我怎样才能通过在主要内容区域之外单击来关闭此弹出窗口？

How can I get this popup to close by clicking outside of the main content area as well?

javascript

modal-dialog

onclick