Скрытие модального окна
Всем привет. Подскажите как скрыть модальное окно, кликом "пустому" пространству на сайте?
Например, на этом форуме при выставлении + или - за сообщение открывается модальное окно, чтобы его скрыть, можно кликнуть по области вне окна. Как такое же осуществить? Я пробовал написать так <body onclick="hide()"> hide() скрывает нужный див. Но в этом случае, если нажать на содержимое самого дива, то див тоже скроется. |
Используйте свойство объекта события target
<head>
<script type="text/javascript">
window.onload = function () {
document.onclick = function (e) {
e = e || window.event;
if((e.target || e.srcElement).id != 'window') {
document.getElementById('window').style.display = 'none';
}
}
}
</script>
</head>
<body>
<div id="window" style="position: absolute; top: 50px; left: 50px; background: red; width: 50px; height: 50px;"></div>
</body>
|
Спасибо) А не подскажешь, где про него можно по подробнее прочитать?
|
И ещё вопрос, откуда берётся аргумент "e" ?
|
Это стандартный аргумент любого события, в нём хранятся данные события, например для onmouseover в нём дополнительно хранятся координаты текущего положения курсора. Ответы на все свои вопросы Вы найдёте здесь.
|
Получилось) Но есть одна проблема, если внутри элемента есть ещё какие-то другие, то окно можно случайно закрыть, при нажатии на него.
Сделал так if(e.target.id != 'id1' && e.target.id != 'id2' && e.target.id != 'id3' и так далее ) Но как можно сделать, чтоб код не учитывал внутренние элементы? Т.к. их может быть огромное количество, то как-то будет "некрасиво" писать для ~50 элементов.. |
У меня такая ситуация
<div id="имя"> ... n'ое количество элементов ... </div> |
повесь обработчик на <div id="имя"> и всё. при действии на любом вложенном в него элементе событие всплывёт к нему. и проверяй не остальные, а его-если ты не трогал настройки
|
В начале так и сделал, вот и возникла проблема описаная выше.
|
Можно в принципе принимать решение скрывать или нет div, анализируя атрибуты parentNode:
<head>
<script type="text/javascript">
window.onload = function () {
document.onclick = function (e) {
e = e || window.event;
var a = false,
node = (e.target || e.srcElement);
while(node.parentNode) {
if(node.id == 'window') {
a = true;
break;
}
node = node.parentNode;
}
if(!a) {
document.getElementById('window').style.display = 'none';
}
}
}
</script>
</head>
<body>
<div id="window" style="position: absolute; top: 50px; left: 50px; background: red; width: 150px; height: 150px;"><div style="background: green; width: 50px; height: 50px;"></div><div style="background: blue; width: 50px; height: 50px;"></div></div>
</body>
или сравнивая координаты места клика и положения элемента:
<head>
<script type="text/javascript">
window.onload = function () {
document.onclick = function (e) {
e = e || window.event;
var div = document.getElementById('window'),
coords = getOffset(div);
if (e.clientX < coords.left || e.clientX > coords.left + div.offsetWidth || e.clientY < coords.top || e.clientY > coords.top + div.offsetHeight) {
div.style.display = 'none';
}
}
}
function getOffset(elem) {
if (elem.getBoundingClientRect) {
return getOffsetRect(elem)
} else {
return getOffsetSum(elem)
}
}
function getOffsetSum(elem) {
var top=0, left=0
while(elem) {
top = top + parseInt(elem.offsetTop)
left = left + parseInt(elem.offsetLeft)
elem = elem.offsetParent
}
return {top: top, left: left}
}
function getOffsetRect(elem) {
var box = elem.getBoundingClientRect()
var body = document.body
var docElem = document.documentElement
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
var clientTop = docElem.clientTop || body.clientTop || 0
var clientLeft = docElem.clientLeft || body.clientLeft || 0
var top = box.top + scrollTop - clientTop
var left = box.left + scrollLeft - clientLeft
return { top: Math.round(top), left: Math.round(left) }
}
</script>
</head>
<body>
<div id="window" style="position: absolute; top: 50px; left: 50px; background: red; width: 150px; height: 150px;"><div style="background: green; width: 50px; height: 50px;"></div><div style="background: blue; width: 50px; height: 50px;"></div></div>
</body>
Проверял в 5 браузерах - Opera, FireFox, IE, Chrome, Safari. Везде работает. |
| Часовой пояс GMT +3, время: 19:25. |