Onclick popup div close when clicked outside of it
Question
How can I add to this to make the pop up close when anywhere on the page is clicked? Thanks
function myFunction() { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); }
4 answers
solution1
0 2020-09-01 06:37:54
You could create a div behind the popup with low opacity that covers the entire page, and add an event listener that toggles "show" when it's clicked.
solution2
0 2020-09-01 06:41:42
You can add the event listener to the document and on click check if the myPopup contains the show class. If true then use classList.remove
document.addEventListener('click', function() { let popup = document.getElementById("myPopup"); if (popup.classList.contains("show")) { popup.classList.remove('show') } } })
solution3
0 2020-09-01 07:10:38
You could add a layer that spans the entire screen behind the popup and listen the click on that element. Whenever somebody clicks inside of the popup, check if the clicked element ( target) is the outer popup layer and hide the popup if it is.
const popup = document.getElementById('myPopup'); function onPopupClick(event) { const { target } = event; if (target === popup) { popup.classList.remove('show'); } } popup.addEventListener('click', onPopupClick);
.popup { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25); opacity: 0; visibility: hidden; transition: opacity 350ms ease-in-out, visibility 350ms ease-in-out; }.popup.show { opacity: 1; visibility: visible; }.popup__inner { display: flex; flex-direction: column; align-items: center; align-content: center; justify-content: center; width: 300px; height: 250px; border-radius: 5px; border: 1px solid #d0d0d0; background-color: #f7f7f7; padding: 0 15px; text-align: center; }
<div id="myPopup" class="popup show"> <div class="popup__inner"> <p>I'm a popup. <br>Click in the white square and see nothing happens</p> <p>Click outside of me and I will close.</p> </div> </div>
solution4
-1 2020-09-01 06:55:16
Here is a custom implementation.
- Use a button click event to show and hide the popup.
- Use a body click event and check whether the ckick event is inside or outside the popup.
- If the click is inside the popup, do nothing. Or else hide the popup.
function myFunction(event) { var popup = document.getElementById("myPopup"); // popup.classList.toggle("show"); if (popup.style.display === "none") { popup.style.display = "block"; } else { popup.style.display = "none"; } event.stopPropagation(); } function onBodyClick(event) { var myTarget = event.target; while (myTarget) { if (myTarget.id === "myPopup") { console.log("You clicked Inside popup"); return; } else { myTarget = myTarget.parentNode; } } console.log("You clicked Outside popup"); var popup = document.getElementById("myPopup"); if (popup.style.display === "block") { myFunction(event); } }
body { width: 100%; height: 100vh; margin: 0; } #myPopup { border: 1px solid black; padding: 50px; }
<body onclick="onBodyClick(event)"> Outside Popup <button onclick="myFunction(event)">Open Popup</button> <div id="myPopup" style="display: none;"> Inside Popup <span> Inner node </span> </div> </body>
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.