HTML Modal not closing when pressing in the gray area -
i created 2 buttons on html, , pressing button, open modal screen. eaxmple 2 buttons, aim page have multiple buttons. when pressing x closes modal screen. but, if press outside modal area, should close well. not work both buttons.
any appreciated, or if know of easier/better way work modal screens. :-)
{
<!doctype html> <html> <head> <style> /* modal (background) */ .modal { display: none; /* hidden default */ position: fixed; /* stay in place */ z-index: 1; /* sit on top */ padding-top: 100px; /* location of box */ left: 0; top: 0; width: 100%; /* full width */ height: 100%; /* full height */ overflow: auto; /* enable scroll if needed */ background-color: rgb(0,0,0); /* fallback color */ background-color: rgba(0,0,0,0.4); /* black w/ opacity */ } /* modal content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* close button */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } </style> </head> <body> <h2>modal example</h2> <!-- trigger/open modal --> <button id="mybtn0">open modal 0</button> <!-- modal --> <div id="mymodal0" class="modal"> <!-- modal content --> <div class="modal-content"> <span class="close">×</span> <p>some text in modal 0..</p> </div> </div> <button id="mybtn1">open modal 1</button> <!-- modal --> <div id="mymodal1" class="modal"> <!-- modal content --> <div class="modal-content"> <span class="close">×</span> <p>some text in modal 1..</p> </div> </div> <script> // modal var modal0 = document.getelementbyid('mymodal0'); var modal1 = document.getelementbyid('mymodal1'); // button opens modal var btn0 = document.getelementbyid("mybtn0"); var btn1 = document.getelementbyid("mybtn1"); // <span> element closes modal var span0 = document.getelementsbyclassname("close")[0]; var span1 = document.getelementsbyclassname("close")[1]; // when user clicks button, open modal btn0.onclick = function() { modal0.style.display = "block"; } // when user clicks button, open modal btn1.onclick = function() { modal1.style.display = "block"; } // when user clicks on <span> (x), close modal span0.onclick = function() { modal0.style.display = "none"; } span1.onclick = function() { modal1.style.display = "none"; } // when user clicks anywhere outside of modal, close window.onclick = function(event) { if (event.target == modal0) { modal0.style.display = "none"; } } window.onclick = function(event) { if (event.target == modal1) { modal1.style.display = "none"; } } </script> </body> </html>}
you have 2 window.onclick = function(event) second 1 overrides first one.
so should have 1 window.onclick handler:
<!doctype html> <html> <head> <style> /* modal (background) */ .modal { display: none; /* hidden default */ position: fixed; /* stay in place */ z-index: 1; /* sit on top */ padding-top: 100px; /* location of box */ left: 0; top: 0; width: 100%; /* full width */ height: 100%; /* full height */ overflow: auto; /* enable scroll if needed */ background-color: rgb(0,0,0); /* fallback color */ background-color: rgba(0,0,0,0.4); /* black w/ opacity */ } /* modal content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* close button */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } </style> </head> <body> <h2>modal example</h2> <!-- trigger/open modal --> <button id="mybtn0">open modal 0</button> <!-- modal --> <div id="mymodal0" class="modal"> <!-- modal content --> <div class="modal-content"> <span class="close">×</span> <p>some text in modal 0..</p> </div> </div> <button id="mybtn1">open modal 1</button> <!-- modal --> <div id="mymodal1" class="modal"> <!-- modal content --> <div class="modal-content"> <span class="close">×</span> <p>some text in modal 1..</p> </div> </div> <script> // modal var modal0 = document.getelementbyid('mymodal0'); var modal1 = document.getelementbyid('mymodal1'); // button opens modal var btn0 = document.getelementbyid("mybtn0"); var btn1 = document.getelementbyid("mybtn1"); // <span> element closes modal var span0 = document.getelementsbyclassname("close")[0]; var span1 = document.getelementsbyclassname("close")[1]; // when user clicks button, open modal btn0.onclick = function() { modal0.style.display = "block"; } // when user clicks button, open modal btn1.onclick = function() { modal1.style.display = "block"; } // when user clicks on <span> (x), close modal span0.onclick = function() { modal0.style.display = "none"; } span1.onclick = function() { modal1.style.display = "none"; } // when user clicks anywhere outside of modal, close window.onclick = function(event) { if (event.target == modal0) { modal0.style.display = "none"; } else if (event.target == modal1) { modal1.style.display = "none"; } } </script> </body> </html>
Comments
Post a Comment