<< Сокращаем условия в if Как обрезать строку по словам на PHP >>

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

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

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

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

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

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

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

1

2

3

4

5

6

7

8

9

<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будет элементом для закрытия окна.

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

1

2

3

4

5

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


18.05.2019 97 Gor Abrahamyan -> web developer : views