26.06.2017, 20:16
|
|
Аспирант
|
|
Регистрация: 18.06.2017
Сообщений: 87
|
|
|
Закрыть модальное окно кликом вокруг
Вот код, который по клику на зелёном блоке div.page вызывает появление модального окна (салатовый блок по центру) с "затенением" серого цвета вокруг. Мне нужно, чтобы модальное окно и затенение исчезали при клике мыши по серому "затенению". Код JS написал, но не почему-то оно не работает (исчезновение). Подскажите, пожалуйста, что нужно исправить. Нужно сделать на чистом JS, я новичок в этом.
<div class="page">
<div class="shim-modal-content">
<div class="modal-content-window"></div>
</div>
</div>
.page {
position: relative;
width: 400px;
height: 500px;
background-color: seagreen;
}
.shim-modal-content {
display: none;
position: fixed;
width: 100%;
height: 100%;
background-color: grey;
}
.modal-content-window {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 350px;
transform: translate(-50%, -50%);
background-color: lightgreen;
}
.shim-modal-show {
display: block;
}
var page = document.querySelector(".page");
var shimModalContent = document.querySelector(".shim-modal-content");
page.addEventListener("click", function(){
shimModalContent.classList.add("shim-modal-show");
});
shimModalContent.addEventListener("click", function(){
shimModalContent.classList.remove("shim-modal-show");
});
|
|
26.06.2017, 20:29
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
Alessio18911,
отмените всплытие клика в строке 7, иначе оно "всплывёт" до строки 3 и сработает уже открытие.
Последний раз редактировалось рони, 26.06.2017 в 20:33.
|
|
26.06.2017, 20:44
|
|
Аспирант
|
|
Регистрация: 18.06.2017
Сообщений: 87
|
|
|
Рони, т.е. проблема в том, что при клике с целью remove оно срабатывает, но затем начинается bubble и срабатывает второй клик - выше - и поэтому создаётся впечатление, что окно не исчезает, да?
|
|
26.06.2017, 20:46
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
Alessio18911,
да
|
|
26.06.2017, 20:57
|
|
Аспирант
|
|
Регистрация: 18.06.2017
Сообщений: 87
|
|
Рони, теперь всё стало лучше, спасибо, Вы, как всегда, меня выручаете  . Но подскажите, пожалуйста, ещё один нюанс: мне нужно, чтобы при клике по самому модальному окну - у меня это форма, в которой есть поля для заполнения - оно и затенение не исчезало, а исчезали, только если кликнуть по затенению вокруг самого модального окна-формы. Сейчас исчезает всё. Код выглядит так:
var page = document.querySelector(".page");
var shimModalContent = document.querySelector(".shim-modal-content");
page.addEventListener("click", function(){
shimModalContent.classList.add("shim-modal-show");
});
shimModalContent.addEventListener("click", function(){
event.stopPropagation();
shimModalContent.classList.remove("shim-modal-show");
});
|
|
26.06.2017, 21:05
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
Alessio18911,
в строке 10 всегда добавляйте event ... function(event){
и
пишите тоже самое для modal-content-window
|
|
26.06.2017, 21:07
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
Alessio18911,
искать по форуму, уже было
|
|
26.06.2017, 21:10
|
|
Аспирант
|
|
Регистрация: 18.06.2017
Сообщений: 87
|
|
Спасибо Вам огромное!! Всё получилось!! |
|
26.06.2017, 21:19
|
|
Аспирант
|
|
Регистрация: 18.06.2017
Сообщений: 87
|
|
|
Рони, простите, возможно и было. Но в основном всё идёт на JQuery - я же только-только в начале изучения JS. И коды очень сложные - чтобы разобраться самому (поискал схожую тему). Может, где-то есть тема на форуме для совсем новичков, чтобы я не засорял "эфир"?
|
|
26.06.2017, 21:23
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
закрытие блока по клику вне его или крестику
Alessio18911,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.page {
position: relative;
width: 400px;
height: 500px;
background-color: seagreen;
}
.shim-modal-content {
display: none;
position: fixed;
width: 100%;
height: 100%;
background-color: grey;
}
.modal-content-window {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 350px;
transform: translate(-50%, -50%);
background-color: lightgreen;
}
.shim-modal-show {
display: block;
}
</style>
</head>
<body>
<div class="page">
<div class="shim-modal-content">
<div class="modal-content-window">
<input name="" type="button" value="X" class="close">
<form action="http://">
<input name="" type="submit" value="send" class="send">
</form></div>
</div>
</div>
<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
var page = document.querySelector(".page");
var shimModalContent = document.querySelector(".shim-modal-content");
page.addEventListener("click", function(event){
var target = event.target;
if(target.closest(".modal-content-window") && !target.closest(".send") && !target.closest(".close"))
event.stopPropagation();
else if( target.closest(".shim-modal-content") )
shimModalContent.classList.remove("shim-modal-show");
else shimModalContent.classList.add("shim-modal-show");
});
});
</script>
</body>
</html>
|
|
|
|
