gpt4 book ai didi

javascript - 在外部单击时隐藏一个 div

转载 作者:太空宇宙 更新时间:2023-11-04 14:05:50 25 4
gpt4 key购买 nike

我有以下用于弹出窗口小部件的 HTML:

<div id="popup">
<div class="popup-wrapper">
<div class="content">
<h1>TEST</h1>
</div>
</div>
</div>

使用CSS:显示为NONE:

#popup {
display: none;
overflow: auto;
}

#popup .popup-wrapper {
background-color: #0D1014;
background-color: rgba(13,16,20,0.95);
height: 100%; width: 100%;
position: fixed; top: 0; left: 0; right: 0; bottom 0;
}

#popup .content {
background-color: #E8F0F3;
border: 1px solid #FFFFFF;

width: 300px;
position: fixed;
top: 50%; left: 50%;
margin-left: -150px;
margin-top: -140px;
padding: 20px;
overflow: hidden;

border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;

-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
}

.no-scroll {
overflow: hidden;
height: 100%; width: 100%;
}

使用 JavaScript 单击链接时将显示弹出窗口:

$(".popup").on('click', function(e) {
$("#popup").fadeIn(200);
$("body").addClass("no-scroll");
});

问题是,如何在仅点击 .popup-wrapper 而不是 .content 时隐藏 #popup

最佳答案

20 分钟前我自己遇到了这个问题
代码:

$("#popup").on('click', function(e) {
if ($(e.target).closest(".content" /*or any other selector here*/).length > 0) {return false;}
$("#popup").fadeOut(200);
$("body").addClass("no-scroll");
});

关于javascript - 在外部单击时隐藏一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21120675/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com