Всплывающее окно на jQuery с затемнением экрана

В последнее время часто вижу сайты, в которых используются всплывающие окна, внутри которых может содержаться различный контент – от обычных форм обратной связи до простой информации. Сделать их на своем сайте не так сложно, как кажется. Для этого потребуется немного css и jQuery кода.

Разберем два популярных вида всплывайки – обычную, внутри которой можно вставлять любой html код – от картинок до форм и просто информации и второй вид – всплывайку с затемнением экрана. Для обоих вариантов нам потребуется библиотека jQuery и использование метода slideToggle.

Обычная всплывайка

Имеет следующий jQuery код:

<script type=”text/javascript”>
$(document).ready(function(){
$(“.openokno”).click(function(){
$(“.blockcentr”).slideToggle(“2000”);
}); });
</script>

Из него следует, что при нажатии на элемент с классом openokno элемент .blockcentr будет переключаться. Изначально blockcentr (сама всплывайка будет скрыта за счет css, но при нажатии кнопки, ее состояние будет переключаться (если скрыта, то покажется, если видима – то скроется). При таком простом подходе можно организовать неплохой информер на своем сайте, например, для формы обратной связи, просто вставив html код формы внутрь элементf .blockcentr.

Всплывающее окно на jQuery с затемнением

Использует более сложный код. Вот он:

<script type=”text/javascript”>
$(document).ready(function(){
$(“.openokno”).click(function(){
$(“.blockcentr”).slideToggle(“2000”);
if($(“div”).hasClass(“blockall”)) 
$(“.blockall”).remove(); 
else $(“.tytoknoall”).append(‘<div class=”blockall”></div>’); 
});
$(“.tytoknoall”).click(function(){
$(“.blockcentr”).slideToggle(“2000”);
$(“.blockall”).remove(); 
}); });
</script>

Принцип работы такой же, как и в предыдущем примере, за исключением того, что теперь нам нужно создавать для всплывающего окна эффект затемнения – это элемент с классом blockall. Скрипт при клике на открывающий окно класс проверяет, существует ли затемнение, если нет – то создает его. Также реализовано закрытие всплывайки при клике на сам фон.

Данные примеры можно при необходимости значительно улучшить и изменить под свои цели. Это можно сказать базовый уровень при работе с всплывающими окнами.