Речь пойдет не о надоедливых всплывающих 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>