Модальное окно

Стильное модальное окно для сайта на jQuery

Стильное простое модальное окно на сайта. Работает данное выплывающее окно на jQuery и имеет приятный плавный эффект раскрытия. Имеется у данного плагина и кнопка закрытия. Советую посмотреть демонстрацию скрипта. При нажатии на кнопку, фон сайта затемняется и перед нами предстает модальное окно с информацией. При нажатии кнопки "Close Me" окно закрывается.

Модальные окна могут пригодиться на любом сайте. Хорошим подспорьем будет данный плагин, если вы делаете свою собственную админку (там такой инструмент сплошь и рядом). Удобны модальные окна для подтверждения чего либо, допустим модальное окно может выводитсья при регистрации пользователя, типа "Вы успешно зарегистрировались, письмо с подтверждением отправлено вам на электронный адрес, который вы указали". Такой всплывающий информационный блок можно использовать в интернет магазине при подтверждении добавления в корзину или заявке на покупку.

Установка этого модального окна на сайт очень проста

1. Скачиваем архив и распаковываем его в корень своего сайта

2. Подключаем скрипты и стили:

<link rel="stylesheet" href="demo.css?v=2">
	<script>!window.jQuery && document.write(unescape('%3Cscript src="jquery-1.7.1.min.js"%3E%3C/script%3E'))</script>
	<script type="text/javascript" src="demo.js"></script>

3. Вставляем html код к сеье на страницу, где вы хотите разместить модальное окно:

<input type="button" value="Zoom In Modal Window" class="button" data-type="zoomin" />

		<div class="overlay-container">
		<div class="window-container zoomin">
			<h3>Hello I'm zoom in modal window</h3>
 			I'm coming using scale transform, using transform: scale() <br/>
			From <strong>scale(1.2)</strong> to scale(1) with transition property make me looks like <strong>come from you</strong> :) <br/>
			<span class="close">Close Me</span>
		</div>
	</div>

Модальное окно у вас на сайте! Приятной работы! За доработку отдельное спасибо Виктору :)

Похожие статьи