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

Question

I have reproduced some js (that I am using on my site) and put it in a codepen and everything works as expected but I would love for the popup to close not only when a user clicks on the 'X' (which it does now) but also clicks outside of the main content area (.lion .wrap).

Thank you so much in advance! Jorie

I found this online : https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_close - that functions exactly as I would like mine to however I have tried to incorporate that code into the js that I am using and simply do not have the skill set to get it to work. I have tried everything and thought that maybe someone here could help me out!

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);

}); 

So as is demonstrated by the codepen, the box closes as expected when clicking on the 'X' but I would like it to also close when a user clicks outside of the main content area (.lion .wrap)

Answer 1

Add this to the bottom of your script:

// 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>