jQuery: Ẩn cửa sổ bật lên nếu nhấp chuột được phát hiện ở nơi khác

Question

Tôi đang cố gắng ẩn div nếu người dùng nhấp vào bất cứ nơi nào NHƯNG cửa sổ bật lên HOẶC đó là trẻ em. Đây là mã tôi có cho đến thời điểm này:

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

Nó hoạt động cho div .popup, nhưng nếu có con nào được nhấp, nó sẽ ẩn nó.

Answer 1

Bạn thực sự có thể đơn giản hóa một chút này tôi nghĩ:

// 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(); 
}); 

Nhấp vào popup, hoặc bất kỳ con của nó sẽ gây ra tác tuyên truyền để ngăn chặn trước khi nó đạt đến cơ thể.

Demo ngăn chặn sự kiện tuyên truyền: http://jsbin.com/ofeso3/edit

Answer 2

Làm nổi bật logic logic của bạn! :)

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

Answer 3

Chúng tôi đang sử dụng này để hiển thị một popup nhấp chuột và sau đó ẩn nó khi bạn nhấp vào nút một lần nữa hoặc nhấp bên ngoài.

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; 
} 

Answer 4

$("body").click(function(event){ 
      var $target = $(event.target); 
      if(!$target.parents().is(".popup") && !$target.is(".popup")){ 
       $("body").find(".popup").hide(); 
      } 
     }); 

đây là giải pháp cho tôi

Answer 5

Tính đến jQuery 1.7 có các handler on(), các công trình sau đây đối với tôi, giả sử một thể nhìn thấy cửa sổ bật lên chứa các lớp '.activePopup':

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

Answer 6

Đây là giải pháp tiềm năng cho một số trường hợp nhất định. Cửa sổ bật lên phải có tabindex được đặt để thao tác này hoạt động và không thể có bất kỳ phần tử "có thể lấy tiêu điểm" nào bên trong.

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

http://jsfiddle.net/d6zw3/

Answer 7

Tôi đang sử dụng một mã rất đơn giản cho điều này như sau: -

$(document).click(function(e){ 

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

này cũng hữu ích cho trình đơn thả xuống. nếu bạn đã nhấp vào menu thả xuống và xem danh sách và sau đó nhấp vào nơi khác trong tài liệu thì trình đơn thả xuống đó sẽ bị đóng. Tôi đã sử dụng cùng một mã cho điều đó.

Cảm ơn !!

Answer 8

Dưới đây là đoạn mã có thể giúp cho một cấu trúc 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> 

Answer 9

để cập nhật mã có thể được như thế này

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

Answer 10

Làm điều này:

$(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 
    } 
}); 

dụ: http://jsfiddle.net/Acf3F/

Answer 11

Tôi đã có vấn đề với tất cả các giải pháp ở đây, vì vậy sau một số thất vọng; Tôi tiếp cận vấn đề theo một hướng hơi khác.

Tôi đặc biệt không thích gắn các sự kiện nhấp vào nội dung hoặc tài liệu và sự kiện. Mục tiêu không đủ tin cậy. Tôi cũng không muốn sử dụng stopPropagation() vì tôi không muốn can thiệp vào các sự kiện khác.

Đây là cách tôi giải quyết nó, hy vọng nó sẽ giúp:

Markup

<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; 
}