Popup окно с сообщением на CSS и JQuery

HTML блок отображаемых при появлении сообщения элементов в popup

В листинге выше сначала идёт div с классом overlay, который затемняет экран, блок же всплывающего сообщения находится в div с классом popup.

Стили CSS

Стили класса overlay это затемненное окно во весь экран. В popup находится блок самого всплывающего элемента с сообщением. По умолчанию класс overlay имеет display: none; что означает что по умолчанию этот блок и вложенные в него не отображается. При необходимости отображения данная запись удаляется, в указанном ниже примере используя JQuery затем добавлением вновь этой строчки блок стирается.

JQuery скрипт появления и исчезновения окна

В листинге выше код на JQuery который отображает и скрывает popup окно(скрывает по таймеру, время которого можно настроить в примере 3 секунды), кроме того есть строчка очищающая форму(если например событие всплывает по отправке формы) и строчка прокрутки страницы вверх, которая может быть использована при необходимости.

Комментарии

Если у Вас возникли вопросы, Вы можете задать их в форме ниже. В частности если Ваш вопрос по Bitrix и что то не получается - можно спросить. Ваш e-mail не публикуется, при этом я отвечу на него если будет что то по теме. Писать необходимо для людей - избегайте сленга, пишите орфографически правильно.

Имя:
E-mail:
Текст комментария:

Вы так же можете прочитать следующие статьи: