more than 2 model in same page
Question
In the examples above, i use a button to close the modal. However, with a little bit of JavaScript, you can also close the modal when clicking outside of the modal box.
the problem is when i use 2 modals just i can close first modal when i click any where , the second one i cannot !!
<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <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 1</button> <button onclick="document.getElementById('id02').style.display='block'" class="w3-button w3-black">Open Modal 2</button> <div id="id01" class="w3-modal"> <div class="w3-modal-content w3-card-4"> <div class="w3-container"> <p>model 1</p> </div> </div> </div> <div id="id02" class="w3-modal"> <div class="w3-modal-content w3-card-4"> <div class="w3-container"> <p>model 2</p> </div> </div> </div> <script> // Get the modal var modal = document.getElementById('id01','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> </html>
1 answers
solution1
0 ACCPTED 2017-11-01 02:59:44
The function document.getElementById , just like the Element in the name indicates, only gets one element, so the second parameter, 'id2' , is ignored, and you end up only getting the first modal element. Read more in the document .
You can use document.getElementsByClassName to fix this:
<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <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 1</button> <button onclick="document.getElementById('id02').style.display='block'" class="w3-button w3-black">Open Modal 2</button> <div id="id01" class="w3-modal"> <div class="w3-modal-content w3-card-4"> <div class="w3-container"> <p>model 1</p> </div> </div> </div> <div id="id02" class="w3-modal"> <div class="w3-modal-content w3-card-4"> <div class="w3-container"> <p>model 2</p> </div> </div> </div> <script> // Get the modal var modals = document.getElementsByClassName('w3-modal'); // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { console.log(event.target, event.target == modals[0], event.target == modals[1]); if (event.target == modals[0] || event.target == modals[1]) { modals[0].style.display = "none"; modals[1].style.display = "none"; } } </script> </body> </html>
Optionally, you can use a relatively new api, document.querySelector , to unify the usages of selecting DOM elements. It uses css selector like string to select elements. But it's a bit new so you may want to check browser compatibility before using it .
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.