Скрыть элемент при клике за его пределами (jQuery)

Данный рецепт можно применять для имитации потери фокуса блочными элементами на странице (событие blur не распространяется на любые блочные элементы в в некоторых браузерах). Допустим, что у нас на странице может появляться элемент с id = message, с сообщением для пользователя. И этот элемент должен пропадать, если пользователь кликнет по любому месту страницы, за исключением самого элемента. Эта задача может быть решена обработкой клика на элементе document. А в обработчике, нужно будет проверит, не является ли источником события наш элемент с id = message или один из его потомков:

$( (){
$(document).click (function (event) {
if ($(event.).closest («#message»).length) return;
$(«p»).hide («slow»);
event.stopPropagation ();
});
});

Продемонстрируем рецепт на рабочем примере:

<!DOCTYPE html>
<html>
<head>
<="http://code.jquery./jquery-latest.js"></script>
<style>
div{float:right; width:200px; height:200px; padding:10px;
background-color:#f99; border:1px solid #69c;}
p{position:absolute; top:60px; left:130px; padding:10px;
width:130px; height:100px; background-color: #99f;
border:1px solid #9cf; text-align:center; font-size:15pt}
</style>
</head>
<body>

<div>
<h3>DIV</h3>
</div>
<h3>BODY</h3>
<p>Окно с сообщением</p>

<script>
$(document).click ( function (event){
if ( $(event.target).closest («p»).length )
return;
$(«p»).fadeOut («slow»);
event.stopPropagation ();
});
</script>

</body>
</html>

Запись навигация

Top