Как сделать всплывающее окно на сайте

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

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

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

Для начала сделаем блок с текстом, а затем через 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	Показывать или не показывать анимацию при появлении всплывающего окна.