我有多个弹出模式，如搜索，按钮，链接和动态添加的元素，我想关闭/隐藏他们在每个弹出模式的容器外点击。如果所有具有相同模式的弹出窗口都没有。
以下是示例代码：
jsfiddle
答案 0 :(得分：1)
您可以做的一个技巧是在文档上添加一个关闭所有模态的单击处理程序。然后，您可以在调用stopImmediatePropagation的模态容器上拥有事件处理程序。这将阻止所有其他处理程序触发并停止冒泡阶段（包括文档处理程序）。因此，只有在模式容器外部单击时才会触发文档处理程序。
function toggleModal(modal) {
$('.modal:not(' + modal + ')').removeClass('visible');
$(modal).toggleClass('visible');
}
$('.more-tags, .js-search__form').on('click', function(e) {
e.stopImmediatePropagation();
});
$('a.toggle-menu').on('click', function(e) {
toggleModal('.more-tags');
e.preventDefault();
e.stopImmediatePropagation();
});
$('.js-search__icon').on('click', function(e) {
toggleModal('.js-search__form');
$('.js-search').focus();
e.preventDefault();
e.stopImmediatePropagation()
});
$(document).on('click', function(e) {
$('.modal').removeClass('visible');
});.btn {
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.42857143;
border-radius: 0.25rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn-border {
border: 1px solid #ddd;
border-radius: 5rem;
padding: 0.5rem 1.25rem;
color: #777;
margin-bottom: 0.5rem;
margin-right: 0.25rem;
font-size: 0.875rem;
}
a svg {
display: inline-block;
height: 1rem;
width: 1rem;
fill: #777;
vertical-align: middle;
}
.more-tags {
position: fixed;
bottom: 0;
left: 10px;
right: 0;
width: 250px;
display: block;
transform: translateY(200%);
height: 70%;
padding: 1.25rem;
background: #fff;
box-shadow: 0 0 37px 10px rgba(0, 0, 0, 0.1);
overflow-y: scroll;
z-index: 9999;
/* transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53); */
transition: transform 0.35s cubic-bezier(0.77, 0, 0.175, 1);
}
.more-tags.visible {
transform: translateY(0);
}
.search__container svg {
position: relative;
width: 19px;
height: 19px;
fill: #777;
}
.search__form {
position: fixed;
background: #fff;
/* box-shadow: 0px 30px 20px 6px rgba(0, 0, 0, 0.05); */
width: 100%;
left: 0;
height: 90px;
top: 0;
right: 0;
padding: 1rem;
z-index: 9999;
visibility: hidden;
opacity: 0;
-moz-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
-webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.search__form.visible {
display: block;
visibility: visible;
opacity: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">
<defs>
<symbol id="icon-search" viewBox="0 0 19 19">
<title>Search icon</title>
<path d="M18.86 17.44l-6.69-6.69a6.69 6.69 0 1 0-1.41 1.41l6.69 6.69zm-12-6a4.7 4.7 0 1 1 3.92-2.16l-1.49 1.43a4.63 4.63 0 0 1-2.48.77z" />
</symbol>
<g id="filter">
<path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" />
<path d="M0 0h24v24H0z" fill="none" />
</g>
</defs>
</svg>
<a href="#" class="toggle-menu btn btn-border">
<span>More</span>
<span class="">
<svg class="filter" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#filter"></use>
</svg>
</span>
</a>
<div class="search">
<div class="search__container">
<div class="search__icon js-search__icon">
<svg viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use>
</svg>
</div>
<form class="modal search__form js-search__form">
<input type="text" class="form-control js-search" id="search" placeholder="Search" autocomplete="off">
<div class="icon icon-close js-icon-close"></div>
<div class="search__container__result">
<ul>
<li><a href="#">I want to get visa</a>
</li>
<li><a href="#">I want to see local communities</a>
</li>
<li><a href="#">I want to get citizen services</a>
</li>
</ul>
</div>
</form>
</div>
</div>
<div class="more-tags modal">
<a href="#" class="js-more-tags-icon-close">
<span class="icon icon-close"></span>
</a>
<div class="more-tags-container">
<div>
<a href="#" class="btn btn-border">
<span>Hotels</span>
<span>
<svg class="icon-hotels" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hotels"></use>
</svg>
</span>
</a>
</div>
<div>
<a href="#" class="btn btn-border">
<span>Supermarkets</span>
<span>
<svg class="icon-shopping" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shopping"></use>
</svg>
</span>
</a>
</div>
<div>
<a href="#" class="btn btn-border">
<span>Restaurants</span>
<span>
<svg class="icon-restaurants" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#restaurants"></use>
</svg>
</span>
</a>
</div>
<div>
<a href="#" class="btn btn-border">
<span>Churches</span>
<span>
<svg class="icon-book" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#book"></use>
</svg>
</span>
</a>
</div>
<div>
<a href="#" class="btn btn-border">
<span>Charities</span>
<span>
<svg class="icon-charity" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#charity"></use>
</svg>
</span>
</a>
</div>
<div>
<a href="#" class="btn btn-border">
<span>Meetings</span>
<span>
<svg class="icon-meeting" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Meeting"></use>
</svg>
</span>
</a>
</div>
</div>
</div>