Всплывающие окна как его сделать

Наверняка вы часто видели на сайтах всплывающие окна. Они используются с различными целями, кто-то с помощью таких окон приглашает пользователей зарегистрироваться, кто-то показывает рекламу. Применений всплывающим окнам на сайте можно найти множество.

Для того чтобы научиться делать такие окна, мы будем использовать написанный мной плагин для создания всплывающих окон — PopupWindow. Он очень прост, имеет самые необходимые настройки и весит в сжатом виде всего 500 байт! Также, прежде чем попробовать плагин в деле, вы можете посмотреть демо версию.

Демо всплывающего окна Скачать плагин PopupWindow

Создание всплывающего окна для сайта

Для начала сделаем блок с текстом, а затем через 1 секунду покажем его во всплывающем окне. Итак, приступаем!

Создаём блок, который будем показывать

<div class="popup-window"> <div class="body"> <p>Содержание всплывающего окна.</p> <p>Здесь может быть ваша реклама!</p> <div class="close-wrapper"> <a href="#close" class="popup-window-close">Закрыть окно</a> </div> </div> </div>

Блок с классом popup-window будет обёрткой для всплывающего окна, а элемент с классом popup-window-close будет элементом для закрытия окна.

Включаем плагин для отображения всплывающего окна

$(document).ready(function() { $(".popup-window").popupWindow({closeSelector: ".popup-window-close"}); });

Здесь мы применили плагин к элементу.popup-window и указали элемент для закрытия окна.popup-window-close. Всё! Если вы всё сделали правильно, то у вас через 1 секунду появится всплывающее окно в нижнем левом углу.

Вы можете изменить отступы от краёв браузера, расположение всплывающего окна, включить или выключить анимацию, для этого посмотрите соответствующие настройки плагина.

Настройки плагина PopupWindow

Параметр Значение по-умолчанию Описание
всплывающие окна как его сделать closeSelector [нет] Селектор элемента, при клике на который закроется всплывающее окно. Обязательный параметр.
timeout 1000 Задержка всплывающего окна (в миллисекундах).
position {v: «bottom», h: «left»} Можно выбрать позицию где будет появляться окна окно (по-умолчанию слева внизу). «v» отвечает за вертикаль, «h» — за высоту.
margin 10 Отступ в пикселях от краёв окна браузера.
animation true Показывать или не показывать анимацию при появлении всплывающего окна.


Поделись с друзьями



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Создаем всплывающее окно при загрузке сайта с помощью CSS3 и немного Переделанное поздравление для невесты

Всплывающие окна как его сделать Всплывающие окна как его сделать Всплывающие окна как его сделать Всплывающие окна как его сделать Всплывающие окна как его сделать Всплывающие окна как его сделать Всплывающие окна как его сделать Всплывающие окна как его сделать

ШОКИРУЮЩИЕ НОВОСТИ