Захотелось мне создать для своих внутренних нужд модальное окошко на jQuery. Чтобы оно открывалось когда человек хочет закрыть вкладку браузера. Только полностью кастомное, чтобы можно было свой текст вставлять в него, размеченный html тэгами.

Событие beforeunload не подходило, поскольку слишком уж топорно работает.

Пришлось шаманить с отрисовкой собственных модальных окон и событиями.

Что получилось можно почитать под катом.

А получилась у меня комбинация из jQuery и плагинов SimpleModal и Cookie.

Первый плагин используется чтобы отрисовать симпатичное окошко с нужным текстом и форматированием, а Cookie используется чтобы не показывать окошко слишком часто. У меня по умолчанию стоит раз в 15 дней.

Всё это объединено в одно целое и доступно для хотлинкинга по ссылке http://core-js.aeon.su/modal-dialog.php?id=basic-modal-content

Этот скрипт подгружает все необходимые скрипты и вешает все необходимые события.

В качестве обязательного параметра id принимается идентификатор элемента в DOM из которого будет строиться диалоговое окно.

Понятно дело, что на вашем сайте уже может быть установлена jQuery и может быть даже плагин Cookie. В этом случае надо этот скрипт вызывать с параметром libs.

http://core-js.aeon.su/modal-dialog.php?id=basic-modal-content&libs=none - подгрузит только саму библиотеку создания модального окна и скрипт инициализации.

http://core-js.aeon.su/modal-dialog.php?id=basic-modal-content&libs=cookie - подгрузит только плагин Cookie и библиотеку создания модального окна и скрипт инициализации.

http://core-js.aeon.su/modal-dialog.php?id=basic-modal-content - подгрузит все необходимые скрипты. Полностью самодостаточный вариант.

Так же можно управлять временем жизни печенек, указав параметр expire.

http://core-js.aeon.su/modal-dialog.php?id=basic-modal-content&expire=0 - показывать диалог постоянно.

http://core-js.aeon.su/modal-dialog.php?id=basic-modal-content&expire=7 - показывать диалог раз в 7 дней.

Коротенько пробежимся по оставшимся параметрам:

width - минимальная ширина диалогового окна;

height - минимальная высота диалогового окна.

Вот примерно так оно создаётся:

<link type='text/css' href='http://core-css.aeon.su/modal-dialog.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='http://core-js.aeon.su/modal-dialog.php?id=basic-modal-content&amp;expire=0'></script>

<div id="basic-modal-content" style="display: none; padding: 8px;">
    <h3>Демо для модального окошка</h3>
    <p>Это демоверсия )</p>
    <p><a href="https://www.youtube.com/channel/UCfO5JiV-5_x9wrHvoZAgBmg">Это ссылка )</a></p>
</div>

Ну и если Вы попробуете сейчас закрыть вкладку, то должны его увидеть )

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

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


Защитный код
Обновить