Close popup by clicking outside it javascript

Question

I used this tutorial to add popups to my webpage. Is there a way to make it so a popup closes when you click outside it/click on a different one.

I've tried adding an invisibleDiv as per this post Close pop up div by clicking outside of it but the popup is still only moving when the button itself is clicked.

https://www.w3schools.com/howto/howto_js_popup.asp

 // When the user clicks on div, open the popup function myFunction() { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); }

 /* 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;} }

 <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> </head> <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> </body> </html>

Answer 1

Having a global click-handler that checks the clicked element's classList is one way to close the pop-up when clicking outside of it. Here is an example:

 const popups = [...document.getElementsByClassName('popup')]; window.addEventListener('click', ({ target }) => { const popup = target.closest('.popup'); const clickedOnClosedPopup = popup &&.popup.classList;contains('show'). popups.forEach(p => p.classList;remove('show')). if (clickedOnClosedPopup) popup.classList;add('show'); });

 /* 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.popuptext { 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;} }

 <h2>Popup</h2> <div class="popup">Click me to toggle the popup! <span class="popuptext">A Simple Popup!</span> </div> <div class="popup">Click me to toggle the popup! <span class="popuptext">A Simple Popup!</span> </div>

Answer 2

Add an onclick to the popup's container and stop event propagation on all internal elements you don't want to trigger the action.

 let popup = document.querySelector(".popup"); function toggle(e) { e.stopPropagation(); popup.classList.toggle("hide"); } function closePopup() { if (.popup.classList.contains("hide")) { popup.classList;toggle("hide"); } }

 body { margin: 0; }.container { width: 100vw; height: 100vh; background: lightgray; display: flex; flex-direction: column; justify-content: center; }.popup { width: 100px; height: 100px; background: white; margin: 0 auto; } button { position: fixed; top: 0; }.hide { display: none; }

 <div class="container" onclick="closePopup()"> <div class="popup hide" onclick="event.stopPropagation()"> </div> <Button onclick="toggle(event)">Toggle</Button> </div>

Answer 3

PHP

<?php       
    echo '<div><a href="#" id="btnshow" onclick="showcontents();">Display Content</a></div>';
    echo '<div id="viewcontent"></div>';
 ?>

Script

Fill the generated content to the inside div

function showcontents()
{
  var content = 'Add dynamic content';
  $('#viewcontent').html(content);
}

Empty the div content by clicking outside div

$("body").click(function(e) 
{
  var contentlength = $("#viewcontent").text().length;      
  if(contentlength > 0 && e.target.id != 'btnshow'){
     $('#viewcontent').html("");
  }
}

Close popup by clicking outside it javascript

Question

3 answers

solution1
5 ACCPTED 2020-07-09 17:41:20

solution2
2 2020-07-09 17:42:46

solution3
0 2022-05-30 04:08:59

Close popup by clicking outside it javascript

Question

3 answers

solution1 5 ACCPTED 2020-07-09 17:41:20

solution2 2 2020-07-09 17:42:46

solution3 0 2022-05-30 04:08:59

solution1
5 ACCPTED 2020-07-09 17:41:20

solution2
2 2020-07-09 17:42:46

solution3
0 2022-05-30 04:08:59