Alex5222304
@Alex5222304
Учусь всему ))

Мимо всплывающего окна жмешь а оно не закрывается как этот вопрос решить?

Есть всплывающее окно , надо что бы при нажатии мимо окна срабатывало как будто его закрыли на крестик
Как эта команда onclick="location.href = 'https://site.ru';return false;"
  • Вопрос задан
  • 358 просмотров
Решения вопроса 1
konnn
@konnn
Front-end developer
Вот хороший пример
https://css-tricks.com/snippets/javascript/showhid...

UPD
Вот вам готовое решение:
<script type="text/javascript">
    function show(state){
		document.getElementById('field').style.display = state;			
		document.getElementById('window').style.display = state;	
	}
</script>

<style>
	body {
		margin: 0;
		background-color: #acacac;
		padding: 20px;
	}
	body a {
		font-size: 12px;
	}
	#field {
		width: 100%;
		height: 100%;
		display: none;
		position: absolute;
		top: 0;
		left: 0;
	}
	#window {
		width: 350px;
		height: 200px;
		display: none;
		background-color: #ffffff;
		text-align: center;
		padding: 30px;
		position: relative;
		top: 50%;
		left: 50%;
		bottom: auto;
		right: auto;
		-webkit-transform: translateX(-50%) translateY(-50%);
		-moz-transform: translateX(-50%) translateY(-50%);
		-ms-transform: translateX(-50%) translateY(-50%);
		-o-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%); 
	}
	#window a {
		position: absolute;
		top: 10px;
		right: 10px;
	}
</style>

<body>
	<a onclick="show('block');" href="#">Показать</a>
<!-- 	это невидимое поле, по клику скрывает field и window -->
	<div onclick="show('none');" id="field"></div>
<!-- 	это ваше всплывающее окно — window -->
	<div id="window">
		<p>Привет, я здесь!</p>
		<a onclick="show('none');" href="#">Закрыть</a>
	</div>
</body>


Здесь я разместил всплывающее окно временно, можно посмотреть результат:
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы