我有一个button，它会打开/显示一个单击它的模态div。 然后，当用户点击div 之外的窗口中的任意位置时，我希望隐藏此div。因此，基于此SO answer中的代码，我编写了以下SSCCE。
但它不起作用。显示模态后，单击它外部不会隐藏它。当我点击模态外没有任何反应。
我哪里错了？我该如何解决？
注意： 我已经看到了处理相同要求的其他问题。我找到了我最好的联系答案，我试过了。问题是为什么这段代码不起作用？
$("button#open-modal-button").click(function() {
$(".modal").show();
});
$(document).mouseup(function(event) {
var modalContainer = $(".modal");
if ( ( !(modalContainer.is(event.target)) // if the target of the click is Not the modalContainer...
&& (modalContainer.has(event.target).length === 0) ) ) {// nor a descendant of the modalContainer
modalContainer.hide();
}
});.modal {
width:100%;
height:100%;
background-color:rgba(0,0,0,0.4);
position:fixed;
z-index:1;
display:none;
left:0;
top:0;
}
.modal-content {
margin:5% auto;
background-color:#fefefe;
padding:20px;
border:1px solid #888;
width:40%;
height:70vh;
overflow:auto;
}
body {
box-shading:border-box;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="open-modal-button">Open Modal</button>
<div class="modal">
<div class="modal-content">
<div class="modal-header">The header</div>
<div class="modal-content">
Some Content
</div>
</div>
</div>
答案 0 :(得分：3)
这是因为您在整个网站上都有覆盖图。此阴影叠加层具有类modal。
因此，您检查用户是否点击modal上的NOT，但您的影子是modal。改变这一切，一切都会奏效。
请看这个我改变选择器的例子。
$("button#open-modal-button").click(function() {
$(".modal").show();
});
$(document).mouseup(function(event) {
var modalContainer = $(".modal");
var modal = $(".modal-content"); // This is what I've added.
if ((!(modal.is(event.target)) && (modal.has(event.target).length === 0)) && $(modalContainer).is(":visible")) {
modalContainer.hide();
}
});.modal {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
position: fixed;
z-index: 1;
display: none;
left: 0;
top: 0;
}
.modal-content {
margin: 5% auto;
background-color: #fefefe;
padding: 20px;
border: 1px solid #888;
width: 40%;
height: 70vh;
overflow: auto;
}
body {
box-shading: border-box;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="open-modal-button">Open Modal</button>
<div class="modal">
<div class="modal-content">
<div class="modal-header">The header</div>
<div class="modal-content">
Some Content
</div>
</div>
</div>
修改
我编辑了我的答案并将&& $(modalContainer).is(":visible")添加到了if。现在，如果modal为visible，则只会遇到此问题。
答案 1 :(得分：1)
你几乎就在那里
使用此行，您可以在每个鼠标上执行操作：
$(document).mouseup(function(event) {
因此，用户始终点击您网站上的某个位置即可进入该功能。 即使模态窗口未打开！这不是您想要的。如果点击.modal而不是其中一个孩子，则您只想关闭模态窗口...
尝试如下：
$("button#open-modal-button").click(function() {
$(".modal").show();
});
$(document).on('click', '.modal', function(event) {
if('modal' !== event.target.className) {
return;
}
$(this).hide();
});.modal {
width:100%;
height:100%;
background-color:rgba(0,0,0,0.4);
position:fixed;
z-index:1;
display:none;
left:0;
top:0;
}
.modal-content {
margin:5% auto;
background-color:#fefefe;
padding:20px;
border:1px solid #888;
width:40%;
height:70vh;
overflow:auto;
}
body {
box-shading:border-box;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="open-modal-button">Open Modal</button>
<div class="modal">
<div class="modal-content">
<div class="modal-header">The header</div>
<div class="modal-content">
Some Content
</div>
</div>
</div>
答案 2 :(得分：1)
您好，您可以尝试使用以下代码...
static Pattern tracePattern = Pattern.compile("(?!\\#).*insert\\s*into",Pattern.CASE_INSENSITIVE);
Matcher localMatcher = tracePattern.matcher(line);
if (localMatcher.find()) {
// doing some checks
}
答案 3 :(得分：1)
您只需为modal-content设置一个事件即可停止event bubbling，为document设置另一个事件以隐藏模式，如下所示。
$('.modal-content').mouseup(function(event) {
event.stopPropagation();
});
$(document).mouseup(function(event) {
$(".modal").hide();
});
工作代码：
$("button#open-modal-button").click(function() {
$(".modal").show();
});
$('.modal-content').mouseup(function(event) {
event.stopPropagation();
});
$(document).mouseup(function(event) {
$(".modal").hide();
});.modal {
width:100%;
height:100%;
background-color:rgba(0,0,0,0.4);
position:fixed;
z-index:1;
display:none;
left:0;
top:0;
}
.modal-content {
margin:5% auto;
background-color:#fefefe;
padding:20px;
border:1px solid #888;
width:40%;
height:70vh;
overflow:auto;
}
body {
box-shading:border-box;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="open-modal-button">Open Modal</button>
<div class="modal">
<div class="modal-content">
<div class="modal-header">The header</div>
<div class="modal-content">
Some Content
</div>
</div>
</div>
答案 4 :(得分：-2)
您可以使用此功能：
$("button#open-modal-button").click(function() {
$("#myModal").modal({backdrop: true});
});