Multiple modals - close on clicking outside function

JavaScript
#1

Hi,

I have been developing a website with multiple modals on one page. I have used code from W3Schools to create the modals and tweaked them in various respects. The problem that I am having is that the ‘close modal on clicking outside the modal’ function only works for the last modal.

My markup is quite bloated as it involves modals in drop down menus but the following simpler code illustrates the same problem. The click outside to close function works for the last modal but not the first, despite using the following markup. The likely offending

#2

Could you share your code?

#3

Hi,

Sorry, I tried to do that in the initial message. My code is a first attempt at drop down menus with modals of embedded ytube vids so is quite bloated but the below indicates the same issue I’ve been having. The click outside to close function works in the last modal but not the first. Script is down the bottom. Many thanks.


<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>


  <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal</button>

  <div id="id01" class="w3-modal">
    <div class="w3-modal-content w3-card-4">
      <header class="w3-container w3-teal"> 
        <span onclick="document.getElementById('id01').style.display='none'" 
        class="w3-button w3-display-topright">&times;</span>
        <h2>Modal Header</h2>
      </header>
      <div class="w3-container">
        <p>You have two options to close this modal</p>
        <p>Click on the "x" or click anywhere outside of the modal!</p>
      </div>
    </div>
  </div>
    </br>
    
    <button onclick="document.getElementById('id02').style.display='block'" class="w3-button w3-black">Open Modal 2</button>

  <div id="id02" class="w3-modal">
    <div class="w3-modal-content w3-card-4">
      <header class="w3-container w3-teal"> 
        <span onclick="document.getElementById('id02').style.display='none'" 
        class="w3-button w3-display-topright">&times;</span>
        <h2>Modal Header2</h2>
      </header>
      <div class="w3-container">
        <p>You have two options to close this 2nd modal</p>
        <p>Click on the "x" or click anywhere outside of the 2nd modal!</p>
      </div>
    </div>
  </div>
</div>
    
    
<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

// Get the modal
var modal = document.getElementById('id02');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

</body>
#4

could you share me your code via codepen, it be great to also view your css and able to visually see the error

#5

Hi,

I’m new to all this so hopefully works ok. Here’s a link to what I think is the code in CodePen. To see the error, click on the first modal and then try clicking outside the box in order to close it. Many thanks.

#6

Below works … think your first window.onClick was being reassigned by your second one so it was never going to work … below i just use one window.onClick and then check for which modal is === to event.target and close it
also you reassign your var modal eg var modal = document.getElementById(‘id01’); … to
var modal = document.getElementById(‘id02’); … you need to give both different names

var modalA = document.getElementById('id01');

// Get the modal
var modal = document.getElementById('id02');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  //alert(event.target)
    if (event.target == modal) {
        modal.style.display = "none";
    } 
  if(event.target == modalA) {
        modalA.style.display = "none";      
     }
}
1 Like
#7

Hi JohnL3,

Thanks very much for this! Worked like a dream. Much appreciated. Regards, Alex

#8