模态没有正确关闭
[英]Modal not closing properly
问题描述
I am trying to create a simple modal.
我正在尝试创建一个简单的模态。 I want it to close when the user clicks anywhere on the window - however, the modal closes only when the user clicks outside of the modal, even though the event target is set to the whole modal.我希望它在用户单击窗口上的任意位置时关闭 - 但是，只有当用户在模态之外单击时，模态才会关闭，即使事件目标设置为整个模态。
I know that the problem is the last line of the javascript code but I can't understand why...I have defined e.target == modal , where modal is the HTML element of the whole modal, including the children's elements (by the class of modal-content ).我知道问题是 javascript 代码的最后一行，但我不明白为什么......我已经定义了e.target == modal ，其中modal是整个模态的 HTML 元素，包括子元素（通过modal-content的类）。 However, the modal-content class does not seem to be affected by e.target == modal .但是， modal-content类似乎不受e.target == modal影响。
Here is the full code:这是完整的代码：
//Get modal element var modal = document.getElementById('simpleModal'); //Get open modal button var modalBtn = document.getElementById('modalBtn'); //Get close button var closeBtn = document.getElementsByClassName('closeBtn')[0]; //Listen for click modalBtn.addEventListener('click', openModal); //Listen for close clock closeBtn.addEventListener('click', closeModal); //Listen for outside click window.addEventListener('click', outsideClick); //Fucntion to open modal function openModal(){ modal.style.display = 'block'; } //Fucntion to close modal function closeModal(){ modal.style.display = 'none'; } function outsideClick(e){ if(e.target == modal){ modal.style.display = 'none'; } }
body{ font-family: Arial, Helvetica, sans-serif; font-size: 17px; line-height:1.6; } .button{ background: coral; padding: 1em 2em; color: #fff; border: 0px; } .button:hover{ background: #333; } .modal{ display:none; position: fixed; z-index: 1; left: 0; top: 0; height:100%; width:100%; overflow:auto; background-color:rgba(0, 0, 0, 0.5); animation-name:modalopen; animation-duration:1s; } .modal-content{ background-color: #f4f4f4; margin: 20% auto; padding:20px; width: 70%; box-shadow: 10px 20px 40px rgba(0, 0, 0); } .closeBtn{ color:#ff0000; float:right; font-size:30px; } .closeBtn:hover, .closeBtn:focus{ color:#000; text-decoration: none; cursor:pointer; } @keyframes modalopen{ from{opacity: 0} to{opacity:1} }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content ="width=device-width, initial-scale=1.0"> <title>Simple Modal</title> <link rel="stylesheet" href="style.css"> </head> <body> <button id="modalBtn" class="button">Click Here</button> <div id="simpleModal" class="modal"> <div class="modal-content"> <span class="closeBtn">×</span> <p>Hello...I am a modal</p> </div> </div> <script src="main.js"></script> </body> </html>
1 个解决方案
解决方案1
0 2018-08-29 15:53:58
You have to addEventListener to the modal for closing it on click event. 您必须将EventListener添加到模式中，以便在单击事件时将其关闭。 Also, some problem may appear because the events listeners are being added at the moment when page wasn't fully rendered, to fix it you have to stick to the DOMContentLoaded event. 另外，由于在页面未完全呈现时添加了事件侦听器，因此可能会出现一些问题，要解决此问题，您必须坚持使用DOMContentLoaded事件。 Wrap the adding of the listeners into the function and call it on the DOMContentLoaded event to fix the problem, please see working code snippet below: 将侦听器添加到函数中，然后在DOMContentLoaded事件上调用它以解决问题，请参见下面的工作代码片段：
document.addEventListener('DOMContentLoaded', function(){ //Get modal element var modal = document.getElementById('simpleModal'); //Get open modal button var modalBtn = document.getElementById('modalBtn'); //Get close button var closeBtn = document.getElementsByClassName('closeBtn')[0]; //Fucntion to open modal function openModal(){ modal.style.display = 'block'; } //Fucntion to close modal function closeModal(){ modal.style.display = 'none'; } function outsideClick(e){ if(e.target == modal){ modal.style.display = 'none'; } } //Listen for click modalBtn.addEventListener('click', openModal); modal.addEventListener('click', closeModal); //Listen for close clock closeBtn.addEventListener('click', closeModal); //Listen for outside click window.addEventListener('click', outsideClick); });
body{ font-family: Arial, Helvetica, sans-serif; font-size: 17px; line-height:1.6; } .button{ background: coral; padding: 1em 2em; color: #fff; border: 0px; } .button:hover{ background: #333; } .modal{ display:none; position: fixed; z-index: 1; left: 0; top: 0; height:100%; width:100%; overflow:auto; background-color:rgba(0, 0, 0, 0.5); animation-name:modalopen; animation-duration:1s; } .modal-content{ background-color: #f4f4f4; margin: 20% auto; padding:20px; width: 70%; box-shadow: 10px 20px 40px rgba(0, 0, 0); } .closeBtn{ color:#ff0000; float:right; font-size:30px; } .closeBtn:hover, .closeBtn:focus{ color:#000; text-decoration: none; cursor:pointer; } @keyframes modalopen{ from{opacity: 0} to{opacity:1} }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content ="width=device-width, initial-scale=1.0"> <title>Simple Modal</title> <link rel="stylesheet" href="style.css"> </head> <body> <button id="modalBtn" class="button">Click Here</button> <div id="simpleModal" class="modal"> <div class="modal-content"> <span class="closeBtn">×</span> <p>Hello...I am a modal</p> </div> </div> <script src="main.js"></script> </body> </html>
解决方案2
-1 2018-08-29 15:39:40
All you need is to call window.addEventListener in the right place you can check this test . 您只需要在正确的位置调用window.addEventListener即可检查此测试 。
//.. code
//Function to open modal
function openModal(){
modal.style.display = 'block';
setTimeout(function(){
window.addEventListener('click', outsideClick);
},200)
}
//Fucntion to close modal
function closeModal(){
modal.style.display = 'none';
}
function outsideClick(e){
modal.style.display = 'none';
window.removeEventListener('click',outsideClick)
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.