jQuery:隐藏popup如果点击检测到其他地方

我试图隐藏一个div如果用户点击任何地方,但popup或OR它的孩子。 这是迄今为止的代码:

$("body").click(function(){ var $target = $(event.target); if(!$target.is(".popup") || !$target.is(".popup").children()){ $("body").find(".popup").fadeOut().removeClass('active'); } }); 

它适用于.popup div,但是如果点击了它的任何一个子项,它就会隐藏它。

你真的可以简化这一点我认为:

 // If an event gets to the body $("body").click(function(){ $(".popup").fadeOut().removeClass("active"); }); // Prevent events from getting pass .popup $(".popup").click(function(e){ e.stopPropagation(); }); 

点击popup窗口或其任何孩子将导致传播到达身体之前停止。

停止事件传播的演示: http : //jsbin.com/ofeso3/edit

我正在使用一个非常简单的代码:

 $(document).click(function(e){ if($(e.target).closest('#popupdivID').length != 0) return false; $('#popupdivID').hide(); }); 

这对下拉菜单也很有用。 如果您点击下拉菜单并查看列表,然后点击文档中的其他位置,则应closures该下拉菜单。 我也使用了相同的代码。

谢谢!!

刷你的布尔逻辑! 🙂

 if(!$target.is(".popup") && !$target.parents().is(".popup")) 

做这个:

 $(document).click(function (e) { // show_alerts is the class of the link to display the popup if (!$(e.target).parents().andSelf().is('.show_alerts')) { // hide your popup } }); 

例如: http : //jsfiddle.net/Acf3F/

这是某些情况下的潜在解决scheme。 popup窗口必须设置tabindex才能正常工作,里面不能有任何“focusable”元素。

 $('a').click(function() { $('.popup').show().focus(); }); $('.popup').blur(function() { $(this).hide(); }); 

http://jsfiddle.net/d6zw3/

我们正在使用这个来显示一个popup的点击,然后隐藏它,一旦你再次点击相同的button或点击外部。

 function togglePopup(){ var selector = '#popup', $popup = $(selector), callback = function(e) { if (!$(e.target).parents().andSelf().is(selector)) { $popup.hide(); $(document).off('click', callback); } }; $popup.toggle(); if ($popup.is(':visible')) { $(document).on('click', callback); } return false; } 
 $("body").click(function(event ){ var $target = $(event.target); if(!$target.parents().is(".popup") && !$target.is(".popup")){ $("body").find(".popup").hide(); } }); 

这是我的解决scheme

从jQuery 1.7开始,就有on()处理程序,下面的例子适用于我,假设一个可见的popup窗口包含类“.activePopup”:

 $('body').on('click', ":not(.activePopup)", function(e){ e.stopPropagation(); //do your hiding stuff }); 

这是可能有助于html结构的代码片段

 <script> jQuery(document).click(function() { jQuery(".main-div-class .content").css("display","none"); }); jQuery(".main-div-class .content").click(function (e) { e.stopPropagation(); //do redirect or any other action on the content }); jQuery(".main-div-class h4").click(function(e) { e.stopPropagation(); jQuery(this).parent().find(".content").show(); }); </script> <div class="main-div-class"> <h4>click here</h4> <div class='content'>to show content here like this "<a href="http://stackoverflow.com/questions/2329816/jquery-hide-popup-if-click-detected-elsewhere#new-answer">Click</a>" or any other type of content</div> </div> 

所以更新的代码可能是这样的

 <script type="text/javascript"> jQuery(document).ready(function(e) { jQuery(document).click(function() { jQuery(".main-div-class .content").css("display","none"); }); jQuery(".main-div-class .content").click(function (e) { e.stopPropagation(); //do redirect or any other action on the content }); jQuery(".main-div-class h4").click(function(e) { e.stopPropagation(); jQuery(this).parent().find(".content").show(); }); }); </script> <div class="main-div-class"> <h4>click here</h4> <div class='content'>to show content here like this "<a href="http://stackoverflow.com/questions/2329816/jquery-hide-popup-if-click-detected-elsewhere#new-answer">Click</a>" or any other type of content</div> </div> 

我在这里遇到了所有解决scheme的问题,所以在经历了一些挫折之后, 我从一个稍微不同的方向来处理这个问题。

我特别不喜欢附加点击事件的身体或文件和event.target是不够可靠的。 我也不想使用stopPropagation(),因为我不想干涉其他事件。

以下是我如何解决它,希望它有帮助:

标记

 <div id="ModalBG"></div> <div id="Modal">Content Here</div> 

JavaScript的

 function showModal(){ $("#Modal, #ModalBG").show(); } $("#ModalBG").click(function () { $("#Modal, #ModalBG").hide() }); 

CSS

 #Modal{ z-index: 99; } #ModalBG{ opacity: 0; position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%; z-index: 98; display: none; }