Я хочу закрыть небольшое всплывающее окно на странице, когда пользователь нажал в любом месте страницы, кроме области окна. как его найти?
Щелчок мыши в другом месте на странице (не на конкретном div)
Ответ 1
$(document.body).click(function(e){
var $box = $('#little-pop-up-box-id');
if(e.target.id !== 'little-pop-up-box-id' && !$.contains($box[0], e.target))
$box.remove();
});
e.target
- это DOM node
, получивший click event
. Сначала я проверяю, если ID
этого элемента не тот, который мы ищем.
Вторая проверка !$.contains($box[0], e.target)
гарантирует, что DOM node of invocation
не внутри элемента, который мы хотим скрыть.
Ну, я думаю, это плагин!
(function($){
$.fn.outside = function(ename, cb){
return this.each(function(){
var $this = $(this),
self = this;
$(document.body).bind(ename, function tempo(e){
if(e.target !== self && !$.contains(self, e.target)){
cb.apply(self, [e]);
if(!self.parentNode) $(document.body).unbind(ename, tempo);
}
});
});
};
}(jQuery));
Конспект
$('#container').outside('click', function(e){
$(this).remove();
});
Пример:
Ответ 2
Решение@jAndy - это хорошо, но я хотел бы упомянуть Ben Alman "Outside Events" plugin. Вот пример:
$("#popup").bind("clickoutside", function(event){
$(this).hide();
});
Ответ 3
Захватите глобальное событие клика или установите прозрачный div 100%/100% во всплывающем окне с таким событием.
Ответ 4
$("html").click(function(){
//close popup
});