JQuery: всплывающее окно (попап-окно) для landing page и не только…

Актуальна тема landing page сегодня, да? Предлагаю вам еще один очень важный атрибут для приземляющей страницы: всплывающее (попап) окно. Оно используется в основном для всплывающих форм заказа товара (услуги) или обратного звонка. Ну, или в любых других случаях.

Как вы уже догадались, без jQuery нам тут не обойтись. Где его искать и куда его подключать, надеюсь, знаете, так что долго останавливаться на этом моменте не будем.

Работаем, как и раньше, со страницей http://vinnichenko.net/portfolio/lp/. Там этих всплывающих окон много. Любое из них вы сможете увидеть, нажав на кнопке «Заказать». Не бойтесь, жмите. Увидите такую картину:

popup

Сразу предлагаю html код данного окна (только оболочки, без формы с полями и кнопкой):

Разберем наш html. Контейнер с классом «overlay» и id «popup» — это наш полупрозрачный темный фон, который занимает все пространство экрана. Внутри него есть контейнер с классом «popup_body» — собственно, всплывающее окно. И есть еще ссылка с классом «close», которая закрывает наш попап (это крестик вверху справа в попапе). Для нее прописана инструкция при клике, понимаю, что это плохой тон, ну… можете поменять.

Сразу дам стили для нашего всплывающего окна:

Разбирать тут особо нечего, единственное, что можно дать — ссылку на изображение-крестик: http://vinnichenko.net/portfolio/lp/images/ic_close.png. Но, конечно же, его вы можете поменять, как и половину визуальных стилей.

Теперь важная вещь: нам ведь нужно откуда-то вызывать наше всплывающее окно? Тут тоже все просто: вешаем на элемент обработчик события onklick с вызовом нашего попапа (по его id):

Думаю, разберетесь.

Если будет что-то не понятно — пишите в комменты, я поменяю.

Успехов!

JQuery: всплывающее окно (попап-окно) для landing page и не только…: 4 комментария

  1. Кирилл

    Здравствуйте, возникает такая проблема окно появляется , я его закрываю и без последующего обновления страницы оно больше не появляется при последующем нажатии(если не обновить страницу).

    1. admin Автор записи

      Здравствуйте, Кирилл!
      Для того, чтобы помочь вам, мне нужно посмотреть на вашу страничку. Дайте ссылку, штоле =)

  2. Слоты

    Привет! Речь пойдет не о надоедливых всплывающих popup окнах в браузере, которые навязывают какую-то рекламу, а о вплывающих окнах, которые предназначены для заполнения форм.

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

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