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

  • 3 361
  • Комментарии: 6
Всплывающее окно для сайта

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

Для того чтобы научиться делать такие окна, мы будем использовать написанный мной плагин для создания всплывающих окон — 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[нет]Селектор элемента, при клике на который закроется всплывающее окно. Обязательный параметр.
timeout1000Задержка всплывающего окна (в миллисекундах).
position{v: «bottom», h: «left»}Можно выбрать позицию где будет появляться окно (по-умолчанию слева внизу). «v» отвечает за вертикаль, «h» — за высоту.
margin10Отступ в пикселях от краёв окна браузера.
animationtrueПоказывать или не показывать анимацию при появлении всплывающего окна.
Понравилась статья? Оцени её!
1 звезда2 звезды3 звезды4 звезды5 звезд (всего голосов: 5, средняя оценка: 4,20 максимальная 5)
Загрузка...
6 комментариев
  • Руслан пишет:

    У тебя доброе лицо)

  • Илья пишет:

    Добрый день, отличный скрипт, Подскажите, что изменить в нем, чтобы окошко скрывалось только после нажатия на ссылку «закрыть окно», а то сейчас сворачивается, когда кликаешь в любой области экрана.

    • Борис Заболотских пишет:

      Здравствуйте! В демо-примере оно закрывается при клике на ссылку «Закрыть окно», обратите внимание на стили на вашем сайте, возможно что-то перебивает.

  • Алексей пишет:

    Добрый день! Как настроить, чтобы всплывающее окно было поверх других окон (в моём случаи, поверх слайдера) з индекс не помогает. Сайт http://for24.ru/ , заранее спасибо!

  • Alex пишет:

    Здравствуйте!
    Не подскажите, как скрывать его? Чтобы закрыл посетитель и при переходе не другую страницу не появлялось? Как куку прикрутить? Спасибо!

  • Alex пишет:

    По клику по экрану закрывает даже, а не по ссылке/кнопке. Чтобы писали в куку добавить
    setcookie(«promo»,»yes»,1) где 1 — это один день (24 часа)

    $(«body»).on(«click», options.closeElementSelector, setcookie(«promo»,»yes»,1), function()

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *