Печать
Категория: Веб сервисы
Просмотров: 7308
Нравится

Захотелось мне создать для своих внутренних нужд модальное окошко на 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>

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

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