Делаем всплывающее окно
Ох уж эти окна …
Наверняка каждый из вас хоть раз, на просторах интернета, встречал всплывающие окна. Нет, не те, что открывают новое окно или вкладку вашего браузера, а те, что появляются на текущей странице.
Popup-окна, широко применимы в качестве: маркетинг-инструмента или способа предоставления информации. Зачастую с их помощью нам предлагают услугу, товар, рекламу, галерею или проигрыватель фильмов одним словом спектр применения всплывающих окон велик.
Ближе к делу…
В этой статье мы с вами подумаем о том, как реализовать механизм всплывающих окон и применить его у себя в проекте.
План действий
- Создадим html структуру нашего окна
- Стилизуем с помощью CSS3
- Придадим движения, используя jQuery
Напутствия
Мы с вами создадим структуру окна (html), спрячем его от пользователя (css) и при определенных условиях (событиях) выведем на странице (jquery).
Вперед по пунктам плана
Перед тем как начать создания html структуры нашего окна, необходимо определиться, что мы хотим в этом окне представить для нашего пользователя.
Мой выбор остановился на форме подписки пользователей.
Шаг 1. Создадим html структуру нашего окна
<div id="pp"> <div class="pp-header"></div> <div class="pp-content"></div> <div class="pp-footer"></div> </div>
Наше Popup-окно состоит из трех основных частей: pp-header - область заголовка, pp-content - основная часть, pp-footer - нижняя часть окна,форма подписки.
Наполняем всплывающее окно содержимым:
<div id="pp"> <div class="pp-header"> <h3>Хотите создать сайт? Подпишитесь на бесплатный курс:</h3> </div> <div class="pp-content"> <div class="pp-content-main"> <h4>Из курса ты узнаешь:</h4> <ul> <li><i class="fa fa-check"></i> Как сделать локальный хостинг;</li> <li><i class="fa fa-check"></i> Как установить WordPress;</li> <li><i class="fa fa-check"></i> Как установить и настроить шаблоны и плагины;</li> <li><i class="fa fa-check"></i> Как создавать современные сайты;</li> <li><i class="fa fa-check"></i> Как создать домен и установить сайт на хостинг.</li> </ul> </div> <div class="pp-content-sidebar"> <i class="fa fa-wordpress"></i> </div> </div> <div class="pp-footer"> <form> <input type="text" placeholder="Ваше имя" /> <input type="text" placeholder="email@email.com" /> <input type="submit" value="Подписаться на курс" /> </form> </div> </div> <div id="pp-bg"></div>
Обратите внимание на
<div id="pp-bg"></div>
данный блок будет делать заливку окна браузера серым полупрозрачным фоном.
Шаг 2. Пропишем стили для всплывающего окна
Отцентрируем наше окно относительно краев окна браузера и спрячем за верхней границей. Зададим размеры основным элементам и стилизуем иконки FontAwesome
#pp { position: fixed; top:-550px; left:50%; margin-left:-285px; width: 570px; background:#f0f0f0; z-index:999999; box-shadow: 0px 0px 10px rgba(0,0,0,0.5); } #pp .pp-header, #pp .pp-footer{ padding: 10px; background: #3D9970; box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.2); } #pp .pp-header h3{ margin:0; font: normal 1.7em/1.3 Verdana; color: #fff; text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.7); text-align: center; } #pp .pp-content{ background: #fff; padding: 20px 10px;} #pp .pp-content-main{ width: 340px; padding: 0 0 10px 10px; margin-right: 10px; display: inline-block; vertical-align: top; } #pp .pp-content-main ul, #pp .pp-content-main h4 {padding-left: 0; margin: 0;} #pp .pp-content-main h4 { font-size: 18px; margin:0 0 5px 20px;} #pp .pp-content-main li {list-style: none;} #pp .pp-content-main li i {margin-right: 5px;} #pp .pp-content-sidebar{ width: 170px; display: inline-block; vertical-align: top; } #pp .pp-content-sidebar i {font-size: 184px; color: #036;} #pp .pp-footer { background: #EAEAEC; } #pp .pp-footer input { padding: 8px 12px; border-radius: 3px; outline: none; border: 1px solid #dfdfdf; } #pp-bg { position: fixed; top:0; left:0; width:100%; height: 100%; background: rgba(30,30,30,0.5); z-index:99999; display: none; } .btn, .btn:visited { position: relative; display: inline-block; outline: none; border: none; padding: 5px 10px 6px; background: #3D9970; box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.2); color: #fff; cursor: pointer; } .btn:hover { background-color: #339970; } .btn:active { top: 1px; }
Придадим движения, используя jQuery
$(document).ready(function(){ var pp = $("#pp"), bg = $("#pp-bg"); function pp_hide(pp, bg){ pp.animate({top: "-550px"}, 1000, function(){bg.fadeOut(1000);}); } function pp_show(pp, bg){ pp.animate({top: "150px"}, 2000); bg.fadeIn(1000).click(function(){pp_hide(pp, bg)}); } pp_show(pp, bg); });
Здесь мы скрываем наше окно позиционируя его вверх на высоту самого блока и при загрузки страницы анимируем его плавное появление 🙂
Вот такой вот простенький пример получился.
Выводы
Если привязать этот пример к событию увода курсора мыши с окна страницы, а это обычно происходит при попытке закрыть сайт, то можно делать вывод такого окна с призывом остаться посетителю на странице, давая в замен интересное предложение (информацию).
Также можно привязать к кукам и выводить уведомление об акции при первом заходе пользователя на сайт.
Одним словом вариантов применения масса! 🙂
Здравствуйте, скажите что куда вставлять. Буду очень признателен.
Здравствуйте, скачайте архив с примером, так вы поймете где и что должно находиться 🙂
Оригинальный ответ. Человек же нормально спросил. Обязательно нужно было в@#бнуться?
Для этого и есть архив с примером, что и где реализовано и раз повторного ответа не поступило, то человеку помогло. А для вас Олеся стоит писать на заборах ваш богатый лексикон.
Интересно…
А форма-то не отправляется.
И вообще обработчик формы нигде не фигурирует.
Здравствуйте, о какой форме идет речь? )
кнопка клёвая )))
Кнопка и правда крутая) Так до конца и не дошел))
Здравствуйте. Я не продвинутый программист и поэтому хотел у Вас спросить, как выводить всплывающее окно в нужном месте страницы сайта? Спасибо.