Модальное окно на затемненном фоне

Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет возможности их использовать, рассмотрим примеры статического окна и всплывающего по клику.
1

Для затемнения сайта достаточно добавить в верстку <div> и CSS стили к нему:

<div class="popup-fade"></div>
HTML
.popup-fade:before {
	content: '';
	background: #000;
	position: fixed; 
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%;
	opacity: 0.7;
	z-index: 9999;
}
CSS

Стили задаются псевдоклассом :before для того чтобы opacity не влиял на контент, который будет в этом блоке. Полупрозрачный фон будет растянут на все окно браузера.

2

Добавим в div.popup-fade блок с контентом, ссылку «закрыть» и стили для них.

<div class="popup-fade">
	<div class="popup">
		<a class="popup-close" href="#">Закрыть</a>
		<p>Всплывающие окна имеют широкий диапазон применений...</p>
	</div>		
</div>
HTML
.popup {
	position: fixed;
	top: 20%;
	left: 50%;
	padding: 20px;
	width: 360px;
	margin-left: -200px;	
	background: #fff;
	border: 1px solid orange;
	border-radius: 4px; 
	z-index: 99999;
	opacity: 1;	
}
.popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
}
CSS
3
$(document).ready(function($) {
	// Клик по ссылке "Закрыть".
	$('.popup-close').click(function() {
		$(this).parents('.popup-fade').fadeOut();
		return false;
	});        

	// Закрытие по клавише Esc.
	$(document).keydown(function(e) {
		if (e.keyCode === 27) {
			e.stopPropagation();
			$('.popup-fade').fadeOut();
		}
	});
	
	// Клик по фону, но не по окну.
	$('.popup-fade').click(function(e) {
		if ($(e.target).closest('.popup').length == 0) {
			$(this).fadeOut();					
		}
	});	
});
JS
4
5

Для реализации popup-а достаточно скрыть блок .popup-fade и добавить событие для открытия окна.

<a class="popup-open" href="#">Открыть popup</a>

<div class="popup-fade">
	<div class="popup">
		<a class="popup-close" href="#">Закрыть</a>
		<p>Всплывающие окна имеют широкий диапазон применений...</p>
	</div>		
</div>

<style>
.popup-fade {
	display: none;
}
.popup-fade:before {
	content: '';
	background: #000;
	position: fixed; 
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%;
	opacity: 0.7;
	z-index: 9999;
}
.popup {
	position: fixed;
	top: 20%;
	left: 50%;
	padding: 20px;
	width: 360px;
	margin-left: -200px;	
	background: #fff;
	border: 1px solid orange;
	border-radius: 4px; 
	z-index: 99999;
	opacity: 1;	
}
.popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
}
</style>

<script src="https://yandex.st/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function($) {
	$('.popup-open').click(function() {
		$('.popup-fade').fadeIn();
		return false;
	});	
	
	$('.popup-close').click(function() {
		$(this).parents('.popup-fade').fadeOut();
		return false;
	});		

	$(document).keydown(function(e) {
		if (e.keyCode === 27) {
			e.stopPropagation();
			$('.popup-fade').fadeOut();
		}
	});
	
	$('.popup-fade').click(function(e) {
		if ($(e.target).closest('.popup').length == 0) {
			$(this).fadeOut();					
		}
	});
});
</script>
HTML
12.12.2018, обновлено 18.10.2019
71652

Комментарии 4

Владимир Турлак Владимир Турлак
25 ноября 2020 в 15:28
Ты лучший!Спасибо за код
Яков Кузьменко Яков Кузьменко
6 апреля 2021 в 21:15
Отличная работа, спасибо! Хоть и не реакт))))
Макс Фрон Макс Фрон
3 июня 2021 в 11:11
Просто и со вкусом! Спасибо!
Подскажите, а как реализовать это решение для следующей задачи:
На странице расположены несколько превьюшек изображений по ходу статьи.
Нужно чтобы по клику на превьюхе, в модальном окне, открывался соотвтествующий ей хайрез.
Пробовал разные стили назначать, но открываются всё равно сразу все, просто в одну колонку ((
Vitalii Vitalii
20 августа 2021 в 08:19
Здравствуйте. Взял ваш скрипт и внедрил в свою верстку. Работает. Но есть одно Но. Как сделать так, чтобы можно было прочитать содержимое попапа, если там много текста? Скрол крутит только задний фон. А как прочитать попап не понятно... Вот например

, чтобы добавить комментарий.

Другие публикации

Отслеживание окончания доменов и SSL-сертификатов
При работе с множеством сайтов возникает необходимость в постоянном контроле срока окончания доменов и особенно...
8886
+5
Фиксированное горизонтальное меню с активными пунктами
Пример горизонтального меню для лэндингов, в котором реализовано...
13397
+3
Модальные окна на Fancybox 3
Fancybox 3 плагин галерей и модельных окон, в отличии от второй версии существенно изменилась скорость работы, дизайн и немного API, далее подробнее о вызове модальных окон.
75108
+2
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
67175
+9
Генерация счета на оплату PDF PHP
С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...
72413
+35
Главное меню для мобильной версии сайта
Не очень сложное раскрывающееся меню для мобильной версии сайта на JQuery.
46510
+13