| |
|
|
| | Есть всплывающее окно и нужно добиться следующего поведения: если окно отображается, а пользователь нажимает мышкой где-то мимо него - оно скрывается. Собственно раньше использовал создание div-а подложкки, который висел на заднем фоне (со 100% шириной и высотой), по нажатию на который и скрывалось окно. Но способ не очень удобный, и я подумал - может есть что-то проще?
Если важно - использую jQuery. | |
| |
|
|
| |
|
|
| |
для: Гость
(09.03.2011 в 09:52)
| | | 1. На самом деле, как я понимаю, Ваше "всплывающее окно" - это просто какой-то тег, имеющий какой-то id (пусть это будет id="myPop") который "при открытии" из состояния display: none переводится в состояние display: block, а при "закрытии" - наоборот. Так?
2. Походу, у Вас имеется некая функция по открытию Вашего "всплывающего окна", так? Если не имеется (а просто выполнена одной строкой), то сделайте. И назовём её здесь Func_First ()
3. В самом начале этой функции Func_First () прописываете "навеску" ещё одной функции Func_Second () на объект document по событию onclick. Как "навешивать" - знаете? Поищите методы attachEvent () и addEventListener (). Но можно и проще (и кроссбраузерно): document.onclick = Func_Second; (БЕЗ круглых скобок)
4. Эта самая Func_Second () отслеживает клик по ЛЮБОМУ месту документа, определяет тег, по которому кликнули. Как определить элемент, по которому кликнули, знаете? Смотрите свойства srcElement и target. Далее функция определяет id этого элемента. Если id != myPop (сиречь, кликнули не по конкретно Вашему "всплывающему окну"), надо убедиться, что кликнули не по какому-то тегу, который находится внутри этого "всплывающего окна". Перебираете последовательно по иерархии родителей объекта, по которому кликнули и проверяете всякий раз его id (сравнивая с myPop) и проверяя - есть ли следующий "родитель".
5. Если сам объект клика или какой-то из его "родителей" имеет id="myPop" - значит, кликнули по "всплывающему окну". Функция Func_Second () просто завершает свою работу простым выходом return. А вот если myPop так и не встретится и следующего родителя не существует (сиречь, перебирая иерархию, Вы добрались до тега <HTML>), то, значится, кликнули ВНЕ окна. В этом случае Вам надо сначала отменить действие функции Func_Second () - см. методы detachEvent () и removeEventListener () - но можно и проще: document.onclick = null;. И уже после этого "погасить" Ваше "всплывающее окно", установив ему стиль display: none
------
Всё понятно?
Насчёт "длительности" процесса перебора "родителей" не переживайте. Обычно сильно "переживают", типа - "это же долго". Это совсем недолго: на стандартной странице вложенность - не более 10 тегов (очень редко - 15). Перебор 15-ти штук с проверкой их id - тысячные доли секунды.
------
Где-то здесь я (не помню уже, под каким именно никнеймом, но точно помню, что для юзера "колобок" по-латински) давал конкретный скрипт этой функции - я имею в виду названную в тексте Func_Second (). Поищите, если сами написать не сможете.
Ну или "свистите", если и не сможете, и не найдёте...
-----
jQuery по определению не может быть "важным". | |
| |
|
|
| |
|
|
| |
для: Абырвалг
(09.03.2011 в 10:19)
| | | без jquery:
// элемент по которому кликнули
var el = event.target || event.srcElement;
|
далее просто определяйте находится он внутри или вне блока. если внутри - ничего не надо делать, если вне - скрывайте нужный вам блок (с помощью функции, повешенной на событие click document'а) | |
| |
|
|
| |
|
|
| |
для: Абырвалг
(09.03.2011 в 10:19)
| | | Наверное, вы тогда были PAT?
PS: кстати, отчего вы меняете ники? | |
| |
|
|
| |
|
|
| |
для: mihdan
(10.03.2011 в 12:00)
| | | Пытается избавиться от негативной кармы:) | |
| |
|
|
| |
|
|
| |
для: SHAman
(10.03.2011 в 12:07)
| | | Всё проще - регулярно меняю компьютеры. Так уж получается.
Адреса из избранного переношу на флешке.
А копаться с вытаскиванием паролей со страниц - лень.
Проще зарегистрироваться вновь. | |
| |
|
|
| |
|
|
| |
для: Абырвалг
(09.03.2011 в 10:19)
| | | >Ну или "свистите", если и не сможете, и не найдёте...
Не нашёл.
Во первых колобков два оказалось, coloboc и kolobok.
Во вторых поиск вывалил без мелочи 700 ссылок, ну не реально их пересмотреть.
Поможешь? | |
| |
|
|
| |
|
|
| |
для: oldold
(18.03.2011 в 18:43)
| | |
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<script>
function openPop ()
{
var z = "if (document.addEventListener) document.addEventListener ('click', clickDocument, false); ";
z += "else if (document.attachEvent) document.attachEvent ('onclick', clickDocument, false); "
z += "else document.onclick = clickDocument;"; setTimeout (z, 0);
document.getElementById ('myPop').style.display = 'block';
document.getElementById ('goPop').style.visibility = 'hidden';
}
function closePop ()
{
if (document.removeEventListener) document.removeEventListener ('click', clickDocument, false);
else if (document.detachEvent) document.detachEvent ('onclick', clickDocument, false);
else document.onclick = null;
document.getElementById ('myPop').style.display = 'none';
document.getElementById ('goPop').style.visibility = 'visible';
}
function clickDocument (ev)
{
var e = window.event || ev, o = e.srcElement || e.target;
while (o.parentNode) {if (o.id == 'myPop') break; else o = o.parentNode}
if (o.id != 'myPop') closePop ();
}
</script>
</head>
<body>
<a id="goPop" href="#" onclick="openPop (); return false">Открыть всплывающее окно<a>
<div id="myPop" style="display: none; width: 654px; height: 123px; background-color: aqua; text-align: center">
Это - всплывающее окно.<hr>Закрыть его можно, кликнув <a href="#" onclick="closePop (); return false">сюда<a>, или по любому месту страницы вне синего фона.
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Абырвалг
(18.03.2011 в 22:11)
| | | Спасибо, сегодня с утра сам пришёл к этому решению.
Меня этот цикл интересовал.
while (o.parentNode) {if (o.id == 'myPop') break; else o = o.parentNode}
if (o.id != 'myPop') closePop ();
}
|
Я изначально через евал сделал, ну какие тут комментарии....
Эта тема заставила думать головой. | |
| |
|
|
