Речь пойдет не о надоедливых всплывающих popup окнах в браузере, которые навязывают какую-то рекламу, а о вплывающих окнах, которые предназначены для заполнения форм.
Всплывающее окно - важный и необходимый функционал сайта для реализации таких важных инструментов, как заказ звонка, авторизации, заполнения различных данных. В общем смысл таких всплывающих окон в том, что форма заполнения динамично появляется в центре экрана с помощью одного клика без перезагрузки страницы.
Работа всплывающих окон реализовывается с помощью javascript: скрипт делает блок с формой видимой и размещает его по центру экрана, учитывая его размеры и разрешение, размещает блок поверх основной части сайта, отделив его, как правило, немного затемненным фоном.
Давайте рассмотрим его в деле:
Html код нашей формы для заполнения
<div class="popup-window"> //форма для заполнения <p class="close">x</p> <table> <tr> <td> Имя: </td> <td> <input type="text"/> </td> </tr> <tr> <td> E-mail: </td> <td> <input type="text"/> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit"/> </td> </tr> </table> </div>
Кнопка, при нажатии на которую открывает всплывающее окно:
<p class="open">Открыть всплывающее окно</p>
Блок с тенью(вспомнился фильм "бой с тенью"):
<div class="backpopup"></div>
Присваиваем стили для наших блоков(комментарии в коде):
<style type="text/css"> .popup-window{ //форма для заполнения display: none; box-shadow: 0px 0px 4px 0px rgb(70, 70, 70); -webkit-box-shadow: 0px 0px 4px 0px rgb(70, 70, 70); -moz-box-shadow: 0px 0px 4px 0px rgb(70, 70, 70); padding: 20px; background: white; z-index: 500; -webkit-border-radius: 5px!important; -moz-border-radius: 5px!important; border-radius: 5px!important; } .open{ //кнопка-ссылка text-decoration: underline; cursor: pointer; } .backpopup{ //тень display:none; width: 100%; height: 100%; position: fixed; background: rgb(105, 105, 105); opacity: 0.7; top: 0; left: 0; z-index: 400; cursor: pointer; } .close{ //кнопка закрытия окна float: right; cursor: pointer; right: 5px; top: 0px; position: absolute; padding: 4px; } </style>
И самый ценный код для работы нашей фичи:
<script type="text/javascript"> $.fn.popup = function() { //функция для открытия всплывающего окна: this.css('position', 'absolute').fadeIn(); //задаем абсолютное позиционирование и эффект открытия //махинации с положением сверху:учитывается высота самого блока, экрана и позиции на странице: this.css('top', ($(window).height() - this.height()) / 2 + $(window).scrollTop() + 'px'); //слева задается отступ, учитывается ширина самого блока и половина ширины экрана this.css('left', ($(window).width() - this.width()) / 2 + 'px'); //открываем тень с эффектом: $('.backpopup').fadeIn(); } $(document).ready(function(){ //при загрузке страницы: $('.open').click(function(){ //событие клик на нашу ссылку $('.popup-window').popup(); //запускаем функцию на наш блок с формой }); $('.backpopup,.close').click(function(){ //событие клик на тень и крестик - закрываем окно и тень: $('.popup-window').fadeOut(); $('.backpopup').fadeOut(); }); }); </script>
Примерно так основана работа всплывающих окон на сайтах.
Еще хотелось бы рассмотреть случай, когда надо открыть всплывающее окно при загрузке сайта. Здесь все очень просто: запускаем нашу чудо-функцию опять же при загрузке страницы:
<script type="text/javascript"> $(document).ready(function(){ //при загрузке страницы: $('.popup-window').popup(); //открыть всплывающее окно при загрузке сайта }); </script>