单击即可关闭多个弹出模式？

Question

我有多个弹出模式，例如搜索，按钮，链接和动态添加的元素，我想在每种弹出模式下在容器外单击它们时将其关闭/隐藏。 如果没有其他操作，可以使用相同的模式弹出所有窗口。

这是一个示例代码： jsfiddle

Answer 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>