Javascript 为什么这个div在用户点击它的外部时没有隐藏？

我有一个

按钮

，它打开/显示一个模态的

div

，单击该div即可然后，当用户单击窗口中

div

之外的任何位置时，我希望该

div

隐藏起来。因此，基于本文中的代码，我编写了以下SSCCE

但它不工作。显示模式后，在其外部单击不会将其隐藏。当我在模态外部单击时，不会发生任何事情

我哪里做错了？我怎么修理它

注意：我看到了其他与相同要求相关的问题。我找到了最好的答案，并尝试了。问题是为什么这个代码不起作用

$（“按钮#打开模式按钮”）。单击（函数（）{
$（“.modal”）.show（）；
});
$（文档）.mouseup（函数（事件）{
var modalContainer=$（“.modal”）；
if（！（modalContainer.is（event.target））//如果单击的目标不是modalContainer。。。
&&（modalContainer.has（event.target.length==0））{//也不是modalContainer的后代
modalContainer.hide（）；
}
});
.modal{
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.4）；
位置：固定；
z指数：1；
显示：无；
左：0；
排名：0；
}
.模态内容{
利润率：5%自动；
背景色：#fefe；
填充：20px；
边框：1px实心#888；
宽度：40%；
高度：70vh；
溢出：自动；
}
身体{
框着色：边框框；
}

开放模态
标题
一些内容
您可以使用此功能：

$("button#open-modal-button").click(function() {
    $("#myModal").modal({backdrop: true});
});

您可以使用此功能：

$("button#open-modal-button").click(function() {
    $("#myModal").modal({backdrop: true});
});

这是因为你有一个覆盖整个网站。此阴影覆盖具有类<代码>模式

因此，您可以检查用户是否没有单击
modal
，但您的阴影是
modal
。改变这个，一切都会成功

看看这个例子，我改变了选择器


$（“按钮#打开模式按钮”）。单击（函数（）{
$（“.modal”）.show（）；
});
$（文档）.mouseup（函数（事件）{
var modalContainer=$（“.modal”）；
var modal=$（“.modal content”）；//这是我添加的内容。
如果（（！（modal.is（event.target））&&&（modal.has（event.target）.length==0））&&&$（modalContainer.is（“：visible”））{
modalContainer.hide（）；
}
});
.modal{
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.4）；
位置：固定；
z指数：1；
显示：无；
左：0；
排名：0；
}
.模态内容{
利润率：5%自动；
背景色：#fefe；
填充：20px；
边框：1px实心#888；
宽度：40%；
高度：70vh；
溢出：自动；
}
身体{
框着色：边框框；
}

开放模态
标题
一些内容
这是因为你有一个覆盖整个网站的覆盖层。此阴影覆盖具有类<代码>模式

因此，您可以检查用户是否没有单击
modal
，但您的阴影是
modal
。改变这个，一切都会成功

看看这个例子，我改变了选择器


$（“按钮#打开模式按钮”）。单击（函数（）{
$（“.modal”）.show（）；
});
$（文档）.mouseup（函数（事件）{
var modalContainer=$（“.modal”）；
var modal=$（“.modal content”）；//这是我添加的内容。
如果（（！（modal.is（event.target））&&&（modal.has（event.target）.length==0））&&&$（modalContainer.is（“：visible”））{
modalContainer.hide（）；
}
});
.modal{
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.4）；
位置：固定；
z指数：1；
显示：无；
左：0；
排名：0；
}
.模态内容{
利润率：5%自动；
背景色：#fefe；
填充：20px；
边框：1px实心#888；
宽度：40%；
高度：70vh；
溢出：自动；
}
身体{
框着色：边框框；
}

开放模态
标题
一些内容
你快到哪里了

有了这句话，你在每只鼠标上都做了些什么：

    $(document).mouseup(function(event) {

因此，用户总是点击你网站上的某个地方，他就会进入这个功能即使模式窗口未打开这不是你想要的。如果单击的是
.modal
，而不是其中一个子项，则只需关闭模式窗口

试着这样做：


$（“按钮#打开模式按钮”）。单击（函数（）{
$（“.modal”）.show（）；
});
$（文档）.on（'单击'，'.modal'，函数（事件）{
if（'modal'！==event.target.className）{
返回；
}
$（this.hide（）；
});
.modal{
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.4）；
位置：固定；
z指数：1；
显示：无；
左：0；
排名：0；
}
.模态内容{
利润率：5%自动；
背景色：#fefe；
填充：20px；
边框：1px实心#888；
宽度：40%；
高度：70vh；
溢出：自动；
}
身体{
框着色：边框框；
}

开放模态
标题
一些内容
你快到哪里了

有了这句话，你在每只鼠标上都做了些什么：

    $(document).mouseup(function(event) {

因此，用户总是点击你网站上的某个地方，他就会进入这个功能即使模式窗口未打开这不是你想要的。如果单击的是
.modal
，而不是其中一个子项，则只需关闭模式窗口

试着这样做：


$（“按钮#打开模式按钮”）。单击（函数（）{
$（“.modal”）.show（）；
});
$（文档）.on（'单击'，'.modal'，函数（事件）{
if（'modal'！==event.target.className）{
返回；
}
$（this.hide（）；
});
.modal{
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.4）；
位置：固定；
z指数：1；
显示：无；
左：0；
排名：0；
}
.模态内容{
利润率：5%自动；
背景色：#fefe；
填充：20px；
边框：1px实心#888；
宽度：40%；
高度：70vh；
溢出：自动；
}
身体{
框着色：边框框；
}

开放模态
标题
一些内容
您好，您可以尝试以下方法：