Close popup by clicking off JS
Question
How do I make a popup close when I click off it/click on a different one?
I've used EventListener to perform the function for the first popup, but when I do the same to a second popup the first popup stops working.
I've tried duplicating the JS code using different Function names and ID for the popups.
var popup = document.getElementById("myPopup"); function myFunction() { popup.classList.toggle("show"); } window.addEventListener('click', ({ target }) => { if (.target.closest('.popup') && popup.classList;contains('show')) myFunction(); }). var popup = document;getElementById("myPopup2"). function myFunction2() { popup.classList;toggle("show"). } window,addEventListener('click'. ({ target }) => { if (.target.closest('.popup') && popup;classList;contains('show')) myFunction2(); });
/* Popup container - can be anything you want */.popup { position: relative; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* The actual popup */.popup.popuptext { visibility: hidden; width: 160px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -80px; } /* Popup arrow */.popup.popuptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } /* Toggle this class - hide and show the popup */.popup.show { visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s; } /* Add animation (fade in the popup) */ @-webkit-keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } @keyframes fadeIn { from {opacity: 0;} to {opacity:1;} }
<body style="text-align:center"> <h2>Popup</h2> <div class="popup" onclick="myFunction()">Click me to toggle the popup! <span class="popuptext" id="myPopup">A Simple Popup!</span> </div> <h2>Popup2</h2> <div class="popup" onclick="myFunction2()">Click me to toggle the popup! <span class="popuptext" id="myPopup2">A Simple Popup again!</span> </div> </body>
1 answers
solution1
0 2020-07-09 19:53:01
Simply add another listener on the document, which will close any open modals.
Then add/modify one on your modal which will stop click events from bubbling up.
The end result is, click anywhere and if the click was over the modal, the modal will intercept and block, otherwise clicking anywhere else, then the document will receive the bubbled event and close the modal...
For good measure you can add a listener for the esc keydown event and close any open modals too
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.