Как вывести модальное (всплывающее) окно без плагинов

В данной статье мы рассмотрим, как создать модальное окно без каких либо плагинов. Данный способ универсален, потому как будет работать на любой CMS или же просто, на статическом сайте.
Сразу хочу обратить внимание, что для работы модального окна нам понадобиться библиотека jQuery. Как правило, данная библиотека идет в комплекте со всеми CMS, но в случае, если она отсутствует или же у вас статический сайт, то скачать ее можно с официального сайта (ссылка на сайт в конце статьи). Подключается библиотека таким образом:
<script type="text/javascript" src="jquery.js"></script>
Обратите внимание, на то, что для избежания ошибок, данная библиотек должна быть подключена один раз и перед вашим кодом (об этом ниже)

Ну вот когда мы подключили библиотеку, давайте определимся создадим само окошко.
Перед закрывающимся тегом body создадим такой html блок с классом modalWindow:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Модульное окно</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<style type="text/css">
		
	</style>
</head>
<body>
	<h1>Hello World</h1>
<!-- Наш блок для модального окна -->
	<div class="modalWindow">Наше модальное окно</div>
<!-- / Наш блок для модального окна -->
</body>
</html>

В данный блок будем вносить содержимое нашего модального окна. Но об этом чуть ниже.

И так, когда мы создали блок, давайте его спрячем добавив к классу modalWindow CSS свойство display:none

.modalWindow { display:none; }

Если вы перезагрузите страничку в браузере, то данный блок будет скрыт.
Теперь, давайте определимся каким действием мы будем отображать наш блок. Как правило, модальное окно содержит либо форму обратной связи или же какую-то информацию, а следовательно отображаться оно будет по клику на ссылку или кнопку. Давайте создадим нашу ссылку, которая по клику будет отображать наш блок.

<a href="#" id="clickMe">Показать Блок</a>
Ну вот на этом этапе, наши основные HTML элементы для модального кона созданы. Теперь, напишем небольшой скрипт, который будет отображаться форму по клику на ссылку и скрывать ее - кликнув по самой форме.
	<script type="text/javascript">
	    jQuery(document).ready(function($){
    		$('#clickMe').click(function(){ // Что будет происходить по клику по ссылке
    			$('.modalWindow').fadeIn('slow'); // Отображаем блок с классом modalWindow
    		});

    		$('.modalWindow').click(function(){ //Что будет происходить по клику блоку modalWindow
    			$(this).fadeOut('slow'); // Скрываем то по чем кликнули
    		});
	    });
	</script>

Обратите внимание, что ссылке, которая вызывает форму, мы назначили ID "clickMe", этот же ID мы указываем в скрипте, тоже самое указывается в скрипте и для самой формы. Я специально в коде оставил комментарии, потому как подробно рассматривать скрипт в данной статье мы не станем. Лучше уделим внимание HTML и CSS.

В данный момент, визуально результат работы скрипта можно описать так: кликаем по ссылке - появляются слова (которые мы указали в HTML блоке) "Наше модальное окно" и когда вы по этим словам кликаете - они скрываются. Вы наверняка спросите: "А где же окно?" ) А вот окно мы сейчас сделаем с помощью CSS. Давайте украсим наш блок modaWindow задав ему ширину, высоту и рамку.

.modalWindow {
	display: none;
	width:300px;
	height:300px;
	border:2px solid #FF0000;
        box-shadow: 0 0 3px #000;

}

С помощью CSS мы задали следущие значения для блока modalWindow: Ширина - 300 пикс., высота - 300 пикс и рамка блока - красного цвета (HEX код цвета - #FF0000) толщиной в 2 пикс. А также добавили тень.

Но и это еще не напоминает модальное окно. Как правило, модально окно появляется по центру экрана и нависает над всем текстом. Чтоб добиться такого эффекта, воспользуемся свойством position и с помощью него добавим нашей форме абсолютное позиционирование (position: absolute);

.modalWindow {
	display: none;
	width:300px;
	height:300px;
	border:2px solid #FF0000;
        box-shadow: 0 0 3px #000;
        position:absolute;
        top:20%;
        /* Далее добавим два свойства для отображения блока по центру */
        left:50%;
        margin-left: -150px; /* отрицательное значение равное 1/2 ширины блока */
        z-index: 1; 
}

Вот теперь мы создали модальное окно, в которое вы можете добавить: форму, текст и прочие элементы для отображения. Пожалуй, наверняка, не понятным осталось свойство z-index. Все дело в том, что по умолчанию все элементы имеют z-index равный 0. Само свойство отвечает за положение элементов по оси Y, т.е. за наложение. К примеру элемент с zindex:1 будет накладываться сверху на элемент со значением z-index:0, таким образом элементы с высшим значением находятся над элементами с меньшим.

Свйоство z-index применяется для элментов имеющих следущие значения свойства position: relative, absolute, fixed

Как видите, мы создали простое модальное окно не используя плагинов. Минусом данного способа можно назвать только необходимость иметь средние знания HTML и CSS, а также понимать как работает JS. А вот плюсов значительно больше: вы можете настроить модальное окно под себя, привязывать вызов данного окна по клику на любой элемент, привязывать разные классы (иногда бывает так, что плагин использует класс или ID, который вы уже использовали в шаблоне) и т.д.

Ну вот на этом и все )
Код примера целиком:
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Модульное окно</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<style type="text/css">
		html, body { height:100%; width:100%; } /* Для примера растягиваем окно на 100% высоту и ширину */
		.modalWindow {
			display: none;
			width:300px;
			height:300px;
			border:2px solid #FF0000;
			box-shadow: 0 0 3px #000;
			position: absolute;
			top: 20%;
			left:50%;
			margin-left:-150px;
			z-index: 1;
		}
	</style>
	<!-- Наш JS -->
	<script type="text/javascript">
	    jQuery(document).ready(function($){
    		$('#clickMe').click(function(){ // Что будет происходить по клику по ссылке
    			$('.modalWindow').fadeIn('slow');
    		});

    		$('.modalWindow').click(function(){ //Что будет происходить по клику по форме
    			$(this).fadeOut('slow');
    		});
	    });
	</script>
</head>
<body>
	<h1>Hello World</h1>
	<a href="#" id="clickMe">Показать Блок</a>
	<div class="modalWindow">Наше модальное окно</div>
</body>
</html>
Разработка сайтов на WordPress Блог WordPress плагины и хаки Как вывести модальное (всплывающее) окно без плагинов