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