Как я могу закрыть это всплывающее окно, нажав также за пределами основной области контента?

Question

Я воспроизвел некоторые js (которые я использую на своем сайте) и поместил их в коде, и все работает как положено, но я бы хотел, чтобы всплывающее окно закрывалось не только тогда, когда пользователь нажимает на «X» (который теперь), но также щелкает за пределами основной области содержимого (.lion .wrap).

Заранее большое спасибо! Jorie

Я нашел это онлайн: 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>