Я хочу закрыть небольшое всплывающее окно на странице, когда пользователь щелкнул мышью в любом месте страницы, кроме области окна. как это найти?
4 ответа
$(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();
});
Пример:
http://www.jsfiddle.net/qbDKN/30/
Решение @ jAndy - это хорошо, но я хотел бы упомянуть плагин Бена Алмана «Внешние события» а> также. Вот краткий пример его использования:
$("#popup").bind("clickoutside", function(event){
$(this).hide();
});
$("html").click(function(){
//close popup
});
Получите событие глобального щелчка или настройте прозрачный div 100% / 100% во всплывающем окне с таким событием.
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.