Задать вопрос
NoName0
@NoName0
верстка

Как сделать правильный js код для закрытия модального окна?

нужно сделать так что-бы при нажатии не на модальное окно , модальное окно закрывалось 

<!DOCTYPE html>
<html lang="ru">
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
	<meta charset="UTF-8">
	<title>test</title>
</head>
<style>
	*{
		
	}
	body{
		margin: 0;
		background: #FFF4F2;
		color:#2E2E2E;
		font-family: Verdana , Arial;
	}
	#modalCont{
		z-index: 5;
		display: none;
		width: 800px;
		height: 600px;
		background: #E8F3EC;
		border-radius: 20px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50% , -50%);
	}
	#close{
		padding-right: 15px;
		float: right;
		font-size: 600%;
		cursor: pointer;
	}
	#modalTextH1{
		font-family: Microsoft JhengHei Light;
		margin: 30px;
		text-align: center;
		font-size: 350%; 
	}
	#textModal{
		padding-left: 7%;
		padding-right: 6%;
		font-size: 109%;
		word-spacing: 2px;
		line-height: 1.6;
	}
</style>
<body id="body">
	<button id="myBtm">Open</button>
		<div id="modalCont" >
			<span id="close">&times;</span>
			<p id="modalTextH1">Модальне окно</p>
			<p id="textModal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic fugiat iusto aliquid nemo reiciendis, libero id dolor, nisi nobis sapiente error, debitis accusamus impedit repellat eveniet tenetur repellendus adipisci, labore maiores voluptatum delectus dolorum temporibus! Maxime a, aspernatur cupiditate sed minima qui ipsum officiis voluptate distinctio quos nesciunt alias eius eaque laudantium quia iusto quod. Alias veniam officia dolor fugiat fuga autem, commodi doloremque obcaecati quas officiis veritatis dolore possimus molestiae quibusdam voluptate sunt consequuntur delectus! Ipsa harum molestias, molestiae nam libero officiis dignissimos praesentium doloremque nulla distinctio earum est blanditiis ullam nesciunt ipsam, minus, dolorem maiores, voluptates animi veniam id ut. Laudantium reprehenderit vero, veniam fuga nulla aliquam harum laboriosam. Tenetur officia enim vero vitae et eveniet consectetur cum culpa aperiam repellat beatae velit, mollitia, nemo incidunt, quia inventore!</p>
		</div>
</body>
</html>

<script>
	var myBtm = document.getElementById('myBtm');
	myBtm.addEventListener('click' , function () {
		modalCont.style.display = 'block';
	});
	setTimeout(function () {
		modalCont.style.display = 'block';
	}, 800);

	var close = document.getElementById('close');
	close.addEventListener('click' , function () {
		modalCont.style.display = '';
	});

	var modalCont = document.getElementById('modalCont');
	
</script>
  • Вопрос задан
  • 1090 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 3
@jslby
Можно просто сделать задний фон на всю страницу. Он может быть затемненным или прозрачным. И повесить на него действие для закрытия окна
Ответ написан
Комментировать
Комментировать
NoName0
@NoName0 Автор вопроса
Спасибо разобрался -
для тех кому нужно решение 

<!DOCTYPE html>
<html lang="ru">
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
	<meta charset="UTF-8">
	<title>test</title>
</head>
<style>
	*{
		
	}
	body{
		margin: 0;
		background: #FFF4F2;
		color:#2E2E2E;
		font-family: Verdana , Arial;
	}
	#ContainerModBody{
		background: #4800FF;
		width: 100%;
		height: 100vh;
		position: fixed;
		opacity: .15;
		display: none;
	}
	#modalCont{
		z-index: 5;
		display: none;
		width: 800px;
		height: 600px;
		background: #E8F3EC;
		border-radius: 20px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50% , -50%);
	}
	#close{
		padding-right: 15px;
		float: right;
		font-size: 600%;
		cursor: pointer;
	}
	#modalTextH1{
		font-family: Microsoft JhengHei Light;
		margin: 30px;
		text-align: center;
		font-size: 350%; 
	}
	#textModal{
		padding-left: 7%;
		padding-right: 6%;
		font-size: 109%;
		word-spacing: 2px;
		line-height: 1.6;
	}
</style>
<body>
	<div id="ContainerModBody"></div>
			<div id="modalCont" >
				<span id="close">&times;</span>
				<p id="modalTextH1">Модальне окно</p>
				<p id="textModal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic fugiat iusto aliquid nemo reiciendis, libero id dolor, nisi nobis sapiente error, debitis accusamus impedit repellat eveniet tenetur repellendus adipisci, labore maiores voluptatum delectus dolorum temporibus! Maxime a, aspernatur cupiditate sed minima qui ipsum officiis voluptate distinctio quos nesciunt alias eius eaque laudantium quia iusto quod. Alias veniam officia dolor fugiat fuga autem, commodi doloremque obcaecati quas officiis veritatis dolore possimus molestiae quibusdam voluptate sunt consequuntur delectus! Ipsa harum molestias, molestiae nam libero officiis dignissimos praesentium doloremque nulla distinctio earum est blanditiis ullam nesciunt ipsam, minus, dolorem maiores, voluptates animi veniam id ut. Laudantium reprehenderit vero, veniam fuga nulla aliquam harum laboriosam. Tenetur officia enim vero vitae et eveniet consectetur cum culpa aperiam repellat beatae velit, mollitia, nemo incidunt, quia inventore!</p>
			</div>
		
	<button id="myBtm" style="height: 100px;">Open</button>
		
</body>
</html>

<script>

	var myBtm = document.getElementById('myBtm');
	var modalCont = document.getElementById('modalCont');
	var ContainerModBody = document.getElementById('ContainerModBody');
	var close = document.getElementById('close');

	myBtm.addEventListener('click' , function () {
		modalCont.style.display = 'block';
		ContainerModBody.style.display = 'block';
	});

	setTimeout(function () {
		modalCont.style.display = 'block';
		ContainerModBody.style.display = 'block';
	}, 800);
	
	close.addEventListener('click' , function () {
		modalCont.style.display = '';
		ContainerModBody.style.display = '';
	});

	ContainerModBody.addEventListener('click' , function () {
		ContainerModBody.style.display = '';
		modalCont.style.display = '';
	});
</script>
Ответ написан
Комментировать
Комментировать
@Shillkas11
Это должно работать. Т.е. суть в том что при клике по элементу body окно закрывается, а при клике по модальному окну дальнейшая передача текущего события родительским элементам прекращается и до body это событие не доходит.

var myBtm = document.getElementById('myBtm');
var modalCont = document.getElementById('modalCont');

myBtm.addEventListener('click' , function (event) {
    event.stopPropagation();
    modalCont.style.display = 'block';
  });
  setTimeout(function () {
    modalCont.style.display = 'block';
  }, 800);
var close = document.getElementById('close');
  close.addEventListener('click' , function () {
    modalCont.style.display = '';
  });

modalCont.addEventListener("click", function(event){
event.stopPropagation();
});
document.body.addEventListener("click", function(){
  modalCont.style.display = '';
});
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Senior Frontend Developer / Старший разработчик Vue.js
Webbankir
До 350 000 ₽
Преподаватель курсов программирования
CODDY • Москва
от 25 000 до 50 000 ₽
Angular разработчик
Netgineers GmbH • Мюнхен
от 3 500 до 5 000 €
Ещё вакансии
Заказы с Хабр Фриланса
Настройка и отладка "Remove Unused CSS" в WP Rocket на WordPress
17 нояб. 2024, в 21:55
5000 руб./за проект
Доработать проект (бэкенд)
17 нояб. 2024, в 20:24
1500 руб./за проект
Написать программный код для расчёта физических параметров, на Python
17 нояб. 2024, в 19:59
3000 руб./за проект
Ещё заказы