jQuery: скрыть всплывающее окно, если щелчок обнаружен в другом месте

Вы действительно можете немного упростить это:

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

Нажатие на всплывающее окно или любой из его детей приведет к остановке распространения до того, как он достигнет тела.

Демонстрация остановки распространения событий: http://jsbin.com/ofeso3/edit

Я использую очень простой код для этого как: –

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

это также полезно для выпадающего меню. если вы нажмете на раскрывающееся меню и просмотрите список, а затем щелкните в другом месте документа, тогда выпадающее меню должно быть закрыто. Я также использовал тот же код для этого.

Благодаря!!

Почистите свою логическую логику! 🙂

 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/

Вот потенциальное решение для определенных ситуаций. Всплывающее окно должно иметь tabindex, установленное для этого, чтобы работать, и не может иметь никаких «настраиваемых» элементов внутри.

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

http://jsfiddle.net/d6zw3/

Мы используем это, чтобы отображать всплывающее окно по щелчку, а затем спрятать его, как только вы снова нажмете ту же кнопку, или щелкните снаружи.

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

это решение для меня

Начиная с jQuery 1.7 существует обработчик on (), для меня работает следующее: предполагается, что видимое всплывающее окно содержит class .activePopup:

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

Вот fragment кода, который может помочь для html-структуры

  
 
click here
 
to show content here like this "Click" or any other type of content
  .  
 
click here
 
to show content here like this "Click" or any other type of content
  

поэтому обновленный код может быть таким

  
 
click here
 
to show content here like this "Click" or any other type of content
  .  
 
click here
 
to show content here like this "Click" or any other type of content
  

У меня были проблемы со всеми решениями здесь, поэтому после некоторого разочарования; Я подошел к проблеме с немного другого направления.

Мне специально не понравилось прикреплять события кликов к телу или документу, а event.target не был достаточно надежным. Я также не хотел использовать stopPropagation (), поскольку я не хотел вмешиваться в другие события.

Вот как я решил это, надеюсь, что это поможет:

наценка

 
 
Content Here 

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