我使用此代码创建了一个基本模式:https://codepen.io/paallaire/project/editor/ZBajYk/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="c-modal-request js-modal-request-close">
<div class="c-modal-request__content">
<a href="#" class="c-modal-request__btn-close js-modal-request-close">Close ME</a>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
目标: 如果我单击“红色”区域或单击“关闭我”按钮
结果 = 模式关闭(在本例中我使用了 jquery.hide() )
但我试图理解为什么当我单击白色区域(模式)时模式会关闭。
最佳答案
问题是:您的 div modal 具有 js-modal-request-close 类，该类与 close 是同一类我.. 为此，单击内部时 div 关闭
要解决这个问题..您需要
1
<div class="c-modal-request js-modal-request-close">
应该是
<div class="c-modal-request">
2
e.stopPropagation();Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
你可以像这样使用它
$(document).ready(function() {
console.log("test");
console.log($);
$(".js-modal-request-close , .c-modal-request").on("click", function(e) {
e.preventDefault();
$(".c-modal-request").hide();
});
$(".c-modal-request__content").on('click' , function(e){
e.stopPropagation();
});
});.c-modal-request {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
height: 100%;
background-color: red;
}
.c-modal-request__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 60px;
max-width: 720px;
width: 100%;
overflow-y: auto;
background-color: #fff;
position: relative;
z-index: 400;
}
.c-modal-request__btn-close {
color: #000;
background-color: yellow;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="c-modal-request">
<div class="c-modal-request__content">
<a href="#" class="c-modal-request__btn-close js-modal-request-close">Close ME</a>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
</div>
</div>Additional : About closing div while click outside you need to look at Use jQuery to hide a DIV when the user clicks outside of it
关于javascript - 在 Javascript 中关闭模态框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44099453/