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

Я пытаюсь скрыть div, если пользователь нажимает нигде, но всплывающее окно или его дети. Это код, который у меня есть до сих пор:

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

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

Демонстрация остановки распространения событий: 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 (), поскольку я не хотел вмешиваться в другие события.

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

наценка

 

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; } 
  • Как получить значение ячейки таблицы с помощью jQuery?
  • Динамическое добавление складных элементов
  • Лучший способ расширения плагина jQuery
  • В Bootstrap open Увеличить изображение в модальном
  • Могу ли я загружать внешние таблицы стилей по запросу?
  • jQuery исключает элементы с определенным classом в селекторе
  • Самый простой способ создать каскадное выпадающее меню ASP.NET MVC 3 с помощью C #
  • jquery on vs click методы
  • Вход в jquery выберите все по фокусу
  • Автозаполнение jQuery UI с помощью JSON
  • jQuery serializeArray не включает кнопку отправки, которая была нажата
  • Давайте будем гением компьютера.