Разное

Простое модальное окно jquery: Создаем простое модальное окно с помощью JQuery

19.09.2023

Модальное окно — Bayguzin.ru

  • Главная
    • >
  • Всё для сайта
    • >
  • Модальные окна

Стильное простое модальное окно на сайта. Работает данное выплывающее окно на 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" data-type="zoomin" />

		<div>
		<div>
			<h4>Hello I'm zoom in modal window</h4>
 			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>Close Me</span>
		</div>
	</div>

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

Если вы не видите кнопку «Скачать»


отключите блокировщик рекламы Скачать (32.73 Kb) Demo