Модальное окно с помощью css и jquery. Делаем всплывающее окно jquery

08.07.2019

Здравствуйте, уважаемые читатели a! Однажды я уже писал о модальных окнах, то была статья . В этой статье покажу способ создания всплывающего окна на любом сайте. Использовать будем jQuery плагин fancybox . А чтобы добавить смысловой нагрузки статье, вставим в модальное окошко форму отправки письма. Сразу хочу заметить модальные окна на этом плагине работают на всех браузерах. Приступим!

Что нам понадобится?! не так уж и много:

библиотека jQuery;
плагин fancybox;
сценарий PHP для отправки сообщения.

Разметка

Скачать актуальную версию плагина Вы сможете по ссылке выше. Что касается плагина fancybox , очень хороший инструмент для создания окон на веб-сайте. В окна можно включать любое содержимое видео, изображения (как по одиночке так и галереей), текст, плавающие фреймы, плагин имеет кучу настроек (о них чуть ниже) + то что он работает одинаково корректно во всех браузерах, очень радует.

Разметку не стану усложнять, просто кликаем по ссылке и открывается окно с формой отправки сообщения:

Отправить сообщение

Где значение атрибута href совпадаем с идентификатором блока div в котором располагается форма отправки письма:

1
2
3
4
5
6
7
8
9
10
11
12
13

Отправка сообщения

Ваш E-mail

Введите сообщение

Отправить E-mail

Добавим на форму два поля это текст сообщения и электронный адрес отправителя, а также кнопку оправки. После того как пользователь введет e-mail, текст сообщения и нажмет отправить сначала проведем проверку корректности введенной информации затем с помощью ajax запроса отправим данные в PHP сценарий.

Изначально форма скрыта:

#inline { display : none ; }

Стили формы

Немного стилей для оформления полей формы и пара классов применяемых к полям при не корректном вводе данных. Когда ошибки исправлены стиль полей становится нормальным.:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

Txt {
display : inline-block ;
color : #676767 ;
width : 420px ;

margin-bottom : 10px ;

padding : 5px 9px ;
font-size : 1.2em ;
line-height : 1.4em ;
}

Txtarea {
display : block ;
resize : none ;
color : #676767 ;
font-family : Arial, Tahoma, sans-serif ;
margin-bottom : 10px ;
width : 500px ;
height : 150px ;
border : 1px dotted #ccc ;
padding : 5px 9px ;
font-size : 1.2em ;
line-height : 1.4em ;
}

Txt : focus ,
.txtarea : focus {
border-style : solid ;
border-color : #bababa ;
color : #444 ;
}

Input.error,
textarea.error {
border-color : #973d3d ;
border-style : solid ;
background : #f0bebe ;
color : #a35959 ;
}

Input.error : focus ,
textarea.error : focus {
border-color : #973d3d ;
color : #a35959 ;
}

Для оформления кнопки «Отправить» будем .:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

#send {
color : #dee5f0 ;
display : block ;
cursor : pointer ;
padding : 5px 11px ;
font-size : 1.2em ;
border : solid 1px #224983 ;
border-radius : 5px ;
background : #1e4c99 ;
background : -webkit-gradient(linear, left top , left bottom , from(#2f52b7 ) , to(#0e3a7d ) ) ;
background : -moz-linear-gradient(top , #2f52b7 , #0e3a7d ) ;
background : -webkit-linear-gradient(top , #2f52b7 , #0e3a7d ) ;
background : -o-linear-gradient(top , #2f52b7 , #0e3a7d ) ;
background : -ms-linear-gradient(top , #2f52b7 , #0e3a7d ) ;
background : linear-gradient(top , #2f52b7 , #0e3a7d ) ;
filter : progid: DXImageTransform.Microsoft .gradient(startColorstr= "#2f52b7" , endColorstr= "#0e3a7d" ) ;
}

#send : hover {
background : #183d80 ;
background : -webkit-gradient(linear, left top , left bottom , from(#284f9d ) , to(#0c2b6b ) ) ;
background : -moz-linear-gradient(top , #284f9d , #0c2b6b ) ;
background : -webkit-linear-gradient(top , #284f9d , #0c2b6b ) ;
background : -o-linear-gradient(top , #284f9d , #0c2b6b ) ;
background : -ms-linear-gradient(top , #284f9d , #0c2b6b ) ;
background : linear-gradient(top , #284f9d , #0c2b6b ) ;
filter : progid: DXImageTransform.Microsoft .gradient(startColorstr= "#284f9d" , endColorstr= "#0c2b6b" ) ;
}

#send : active {
color : #8c9dc0 ;
background : -webkit-gradient(linear, left top , left bottom , from(#0e387d ) , to(#2f55b7 ) ) ;
background : -moz-linear-gradient(top , #0e387d , #2f55b7 ) ;
background : -webkit-linear-gradient(top , #0e387d , #2f55b7 ) ;
background : -o-linear-gradient(top , #0e387d , #2f55b7 ) ;
background : -ms-linear-gradient(top , #0e387d , #2f55b7 ) ;
background : linear-gradient(top , #0e387d , #2f55b7 ) ;
filter : progid: DXImageTransform.Microsoft .gradient(startColorstr= "#0e387d" , endColorstr= "#2f55b7" ) ;
}

Fancybox

Переходим к самому интересному, к использованию плагина. Вызываем метод .fancybox в качестве селектора выступает класс ссылки:

$(document) .ready (function () {
$(".modalbox" ) .fancybox () ;
$("#contact" ) .submit (function () { return false ; } ) ;

Также отменяем стандартное действие формы submit (отправить), это позволит нам использовать свой собственный ajax запрос. При вызове метода я не использовал не одного параметра, оставил все значения по умолчанию. Однако о них стоит упомянуть:

Название	Описание
padding	Отступы до содержимого в окне (По-умолчанию 15px)
margin	Расстояние от краев браузера до окна (По-умолчанию 20px)
width	Ширина по умолчанию для «IFRAME» и «SWF» содержимого. Кроме того, для «inline», «AJAX» и «HTML» объектов если «AutoSize» устанавливается на «false». Может быть числовым или «Auto». (По-умолчанию 800px)
height	Высота по умолчанию для «IFRAME» и «SWF» содержимого. Кроме того, для «inline», «AJAX» и «HTML» объектов если «AutoSize» устанавливается на «false». Может быть числовым или «Auto». (По-умолчанию 600px)
minWidth	Минимальная ширина окна (По-умолчанию 100px)
minHeight	Минимальная высота окна (По-умолчанию 100px)
maxWidth	Максимальная ширина окна (По-умолчанию 9999px)
maxHeight	Максимальная высота окна (По-умолчанию 9999px)
autoSize	Если «true», то autoHeight и autoWidth также «true» (По-умолчанию true)
autoHeight	Если установлен «true», для «inline», «AJAX» и «HTML» содержимого высота определяется автоматически (По-умолчанию false)
autoWidth	Если установлен «true», для «inline», «AJAX» и «HTML» содержимого ширина определяется автоматически (По-умолчанию false)
autoResize	Если установлено «true», то размер содержимого будет изменяться вместе с изменением окна
autoCenter	Если установлено «true», то содержимое будет по центру
fitToView	Если установлено «true», то окно будет подстроено под размер браузера перед открытием (По-умолчанию true)
aspectRatio	Если установлено «true», то изменение размера ограничено соотношением сторон (По-умолчанию false)
topRatio	Вертикальное позиционирование. Если установлено 0.5 то расстояние до верха и низа окна браузера будет одинаково. Если 0 то модальное окно будет сверху (По-умолчанию 0.5)
leftRatio	Аналогичный параметр только для горизонтального позиционирования (По-умолчанию 0.5)
scrolling	Показывать полосы прокрутки. Может быть установлено ‘auto’, ‘yes’, ‘no’ или ‘visible’ (По-умолчанию auto)
wrapCSS	Настраиваемый класс CSS
arrows	Если установлено «true», то будут отображаться навигационные кнопки (По-умолчанию true)
closeBtn	Если установлено «true», то кнопка закрыть окно будет отображаться (По-умолчанию true)
closeClick	Если «true», то при нажатии на содержимое окно закроется (По-умолчанию false)
nextClick	Если установлено «true», то в галерее при нажатии на содержимое будет переход к следующей картинке (По-умолчанию false)
mouseWheel	Если «true», то галерею можно прокручивать с помощью колесика мыши (По-умолчанию true)
autoPlay	Если «true», то при открытии первого элемента галерее начнется слайдшоу (По-умолчанию false)
playSpeed	Скорость слайдшоу (По-умолчанию 3000 миллисекунд)
preload	Количество картинок миниатюр под основным изображением (По-умолчанию 3)
modal	Если «true», навигация и кнопка закрытия будет отключена (По-умолчанию false)
loop	Если «true», то в галерее после достижения конца, начнется заново (По-умолчанию true)
ajax	Опция для ajax запроса
iframe	Опция для управления iframe
swf	Опция для управления swf содержимым
keys	Можно определить клавиши для навигации по слайдшоу
direction	Направление навигации
scrollOutside	Если установлено «true», то сценарий будет избегать создания полос прокрутки (По-умолчанию true)
index	Переопределяет индекс группы начала (По-умолчанию 0)
type	Переопределяет тип содержимого. Поддерживаемые типы «image», «inline», «AJAX», «IFRAME», «SWF» и «HTML» (По-умолчанию null)
href	Переопределяет ссылкой источник контента (По-умолчанию null)
content	Переопределяет содержимое, которое будет отображаться (По-умолчанию null)
title	Переопределяет заголовок, можно установить любой HTML (По-умолчанию null)
tpl	Объект, содержащий различные шаблоны
openEffect / closeEffect / nextEffect / prevEffect	Эффект анимации для действий, возможны значения ‘fade’, ‘fade’, ‘elastic’, ‘elastic’
openSpeed / closeSpeed / nextSpeed / prevSpeed	Скорость анимации (По-умолчанию 250)
openEasing / closeEasing / nextEasing / prevEasing	Easing метод для каждого типа перехода (По-умолчанию swing)
openOpacity/ closeOpacity	Если установлено «true», то меняется прозрачность (По-умолчанию true)
openMethod/ closeMethod/ nextMethod/ prevMethod	Эффект transition может принимать значения ‘zoomIn’ / ‘zoomOut’ / ‘changeIn’ / ‘changeOut’
parent	Родительский элемент в контейнере. Это полезно для ASP.NET, где верхний элемент является «формой» (По-умолчанию body)

Пользоваться данными параметрами очень просто, допустим мы хотим уменьшить отступы до содержимого контента и высоту содержимого:

1
2
3
4

$(".modalbox" ) .fancybox ({
padding : 0 ,
height : 100
} ) ;

Отправка сообщения

Перед отправкой мы будем проверять правильность введенных данных, корректность введенного электронного адреса. Поэтому нам понадобится функция проверки. Использовать будем регулярное выражение:

1
2
3
4

function validateEmail(email) {
var reg = /^(([^()[\]\\.,;:\s@"]+(\.[^()[\]\\.,;:\s@"]+)*)|(".+"))@((\[{1,3}\.{1,3}\.{1,3}\.{1,3}\])|((+\.)+{2,}))$/ ;
return reg.test (email) ;
}

Последний шаг — это отправка сообщения. Отслеживаем событие клик по кнопке «Отправить»:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$("#send" ) .on ("click" , function () {
var emailval = $("#email" ) .val () ;
var msgval = $("#msg" ) .val () ;
var msglen = msgval.length ;
var mailvalid = validateEmail(emailval) ;
// Проверка правильности электронного адреса
if (mailvalid == false ) {
$("#email" ) .addClass ("error" ) ;
}
else if (mailvalid == true ) {
$("#email" ) .removeClass ("error" ) ;
}
// Проверка длины сообщения
if (msglen < 4 ) {
$("#msg" ) .addClass ("error" ) ;
}
else if (msglen >= 4 ) {
$("#msg" ) .removeClass ("error" ) ;
}

Помещаем в первые две переменные данные, которые ввел пользователь. Определяем длину сообщения (msglen ) и проводим проверку введенного электронного адреса (mailvalid ). Далее проверяем если в переменная mailvalid равна false , значит электронный адрес введен неверно, и данный инпут будет подсвечен красным. Также проверяем количество введенных символов в текст сообщения, если меньше 4 символов значит показываем, что это ошибка (подсвечиваем текстовый инпут красным). $("#contact" ) .serialize () ,
success: function (data) {
if (data == "true" ) {
$("#contact" ) .fadeOut ("fast" , function () {
$(this ) .before ("Успешно! Ваше сообщение отправлено:)" ) ;
setTimeout("$.fancybox.close()" , 1000 ) ;
} ) ;
}
}
} ) ;
}
} ) ;

Если оба поля проверены то вместо кнопки «отправить» показываем текст, что происходит отправка сообщения. Это дает пользователю подтверждение того, что оба поля проверены и идет процесс.

Теперь запрос AJAX. Первый параметр запроса это тип передачи данных (POST или GET). Далее указываем файл обработчик (sendmessage.php ). Следующий параметр data (данные), методом serialize подготавливаем данные в формах для отправки на сервер.

Если мы получим хороший отклик от сервера (эти данные мы формируем в пхп файле), то мы скроем контактную форму и покажем сообщение об успехе отправки. Я использую SetTimeout() , для того чтобы модальное окно закрылось не сразу а через секунду после отправки данных.

PHP сценарий

Мы посылаем данные, введенные пользователем с помощью JQuery в sendmessage.php . В PHP мы формируем получаем эти данные из POST массива, формируем и отправляем сообщение. Если отправка прошла успешно возвращаем обратно в JQuery true иначе false .

В переменной $sendto мы указываем адрес электронной почты на который будут приходить письма.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$sendto = "[email protected]" ;
$usermail = $_POST [ "email" ] ;
$content = nl2br ($_POST [ "msg" ] ) ;

// Формирование заголовка письма
$subject = "Новое сообщение" ;
$headers = "From: " . strip_tags ($usermail ) . "\r \n " ;
$headers .= "Reply-To: " . strip_tags ($usermail ) . "\r \n " ;
$headers .= "MIME-Version: 1.0\r \n " ;
$headers .= "Content-Type: text/html;charset=utf-8 \r \n " ;

// Формирование тела письма
$msg = "" ;
$msg .= "Новое сообщение\r \n " ;
$msg .= "

От кого: " . $usermail . "

\r \n " ;
$msg .= "

Сообщение: " . $content . "

\r \n " ;
$msg .= "" ;

// отправка сообщения
if (@ mail ($sendto , $subject , $msg , $headers ) ) {
echo "true" ;
} else {
echo "false" ;
}

3. Пример модального окна jQuery, вызванного по ссылке (с Демо)

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

Создаём простое всплывающее модальное окно Приступим к рассмотрению кода простейшего модального окна, которое будет сразу появляться
jQuery код

$(document).ready(function()
{
alert("Текст во всплывающем окне");
});

Код вставляете в любое место в body Вашей страницы. Сразу после загрузки страницы, без каких-либо команд, Вы увидите окно следующего вида:

А вот следующий код будет выполняться после загрузки всей страницы в браузер. В нашем примере после загрузки страницы с изображениями выскочит простое всплывающие окошко:

$(window).load(function()
{
alert("Загрузка страницы завершена!)");
});

Вызов модального окна jQuery по ссылке с CSS Следующим шагом будет создание модального окна при нажатии по ссылке. Фон при этом будет медленно затемняться.

Часто можете видеть, что форма входа и регистрации находятся именно в таких окнах. Приступим к делу

Для начала напишем html-часть . Этот код размещаем в body Вашего документа.

Вызов модального окна

Текст модального окна
Закрыть
Текст в модальном окне.

Код CSS . Либо в отдельном css-файле, либо в в head.

body {
font-family:verdana;
font-size:15px;
}
.link {color:#fff; text-decoration:none}
.link:hover {color:#fff; text-decoration:underline}
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0px;
-top: 40px;
width:440px;
height:200px;
display:none;
z-index:9999;
padding: 20px;
overflow: hidden;
}
#boxes #dialog {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}
.top {
position:absolute;
left:0;
top:0;
width:370px;
height:30px;
background: #0085cc;
padding: 8px 20px 6px 10px;
}
.close {
float:right;
}
.content {
padding-top: 35px;
}

В коде jQuery основное внимание уделим позиции модального окна и маске, в нашем случае постепенному затемнению фона.

Внимание! Не забываем подключить библиотеку в head документа!

Подключение библиотеки с сайта Google. Ну и непосредственно сам код jQuery.

Код jQuery

$(document).ready(function() {
$("a").click(function(e) {
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$("#mask").css({"width":maskWidth,"height":maskHeight});
$("#mask").fadeIn(1000);
$("#mask").fadeTo("slow",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("left", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(function (e) {
e.preventDefault();
$("#mask, .window").hide();
});
$("#mask").click(function () {
$(this).hide();
$(".window").hide();
});
});

В статье о создание модального окна на css мы разобрали что такое модальное окно и зачем оно нужно. А так же создали окно используя только css. В этой статье я опишу как создать модальное окно javascript. А конкретнее мы будем для создания использовать библиотеку jquery.

И так начнём создавать модальное окно на jquery. Для усложнения задачи поставим такое условие. Нам нужно будет создать адаптивное модальное окно. А адаптивность будет заключаться в том, что окно при уменьшении размера экрана то же будет уменьшаться. Адаптивное модальное окно jquery начнём создавать с html разметки.

Жми здесь! X Заказать звонок

С кодом я думаю всё понятно. Имеем оболочку.wraper, где находится контент нашего сайта. Есть кнопка вызова модального окна с идентификаторм gowindow, само окно с ид modal_window и перекрывающий слой myoverlay. Напишем теперь css стили.

Wraper { width: 100%; margin: auto; width: auto;/*то же что и 100%*/ max-width: 960px;/*максимальная ширина обёртки*/ border: 1px solid #000; background-color: #F5F9FB; } .button{ /*-------*/ } #modal_window { width: 34%;/*для адаптивности*/ height: 300px; border-radius: 10px; border: 3px #fff solid; background: #e0e0e0; margin-top: -30%; margin-left: 33%; display: none; opacity: 0; /*полная прозрачность для анимации */ z-index: 5000; /*окно должно быть верхним слоем*/ padding-top: 20px; text-align: center; position: relative; } #modal_window #window_close { width: 21px; height: 21px; position: absolute; top: 10px; right: 10px; cursor: pointer; display: block; } #myoverlay { z-index: 3000; /*выше всех слоёв но ниже окна */ position: fixed; /*для перекрытия сайта*/ background-color: #000; opacity: 0.5; width: 100%; height: 100%; /*полностью на экран */ top: 0; left: 0; cursor: pointer; display: none; }

Опишем css код. Блок.wraper задаём адаптивным, он меняется от размера экрана но не более 960px. Код кнопки показывать не буду. Ширину окна #modal_window задаём в процентах, ширина будет зависеть от ширины.wraper. Для центровки окна задаём марджин 33%. Он расчитывается так 50%-17%, где 17% половина ширины окна. Скрываем окно свойствами display: none и opacity: 0. С кодом #window_close и #myoverlay я думаю всё ясно. Давайте теперь напишем код для jquery. Будем считать что jqery уже подключена.

$(document).ready(function() { $("#gowindow").click(function(){//клик по кнопке $("#myoverlay").fadeIn(400, //показываем перекрывающий слой function(){ $("#modal_window") .css("display", "block") //делаем окно видимым.animate({opacity: 1, top: "50%"}, 200); //увеличиваем прозрачность, окно плавно съезжает }); }); /* убираем окно */ $("#window_close, #myoverlay").click(function(){ //нажатие по перекрывающему слою или кресту $("#modal_window") .animate({opacity: 0, top: "45%"}, 200, //вкл прозрачность, окно идёт вверх function(){ $(this).css("display", "none"); //делаем окно невидимым $("#myoverlay").fadeOut(400); //убираем слой перекрытие }); }); });

Js код я думаю в объяснении не нуждается, так как я его достаточно хорошо прокомментировал. На этом я думаю всё, так что подведём итоги. Мы сделали простое адаптивное модальное окно jquery

1. Модальное окно на jQuery «Simple Modal Box» 2. jQuery плагин «LeanModal»

Отображение контента в модальных окнах. Для просмотра плагина в действии на демонстрационной странице нажмите на ссылку: Sign Up Form или Basic Content.

3. jQuery плагин «ToastMessage»

Всплывающие сообщения. Плагин в двух вариантах. В одном случае сообщения исчезают самостоятельно, по прошествии определённого времени, во второй реализации для того чтобы закрыть сообщение необходимо нажать на кнопку.

4. Содержимое, всплывающее в модальном окне

Плагин «Reveal». Для просмотра плагина в действии нажмите на кнопку «Fire A Reveal Modal» на демонстрационной странице.

5. Симпатичные диалоговые окна

Нажмите на крестик на демонстрационной странице, чтобы посмотреть плагин в действии.

6. Mootools модальное окно, плагин «MooDialog»

7. jQuery всплывающая панель сверху экрана

8. jQuery всплывающее окно

jQuery плагин для отображения формы обратной связи во всплывающем окне.

10. MooTools плагин «LightFace» для реализации диалоговых окон Facebook

Диалоговые окна в стиле Facebook. Помимо статической информации в окна можно поместить изображения, фреймы, Ajax запросы. Много настроек работы плагина, очень мощный инструмент. Выглядит очень стильно и функционально. Пройдите по ссылкам на демонстрационной странице чтобы посмотреть примеры с различным содержимым.

11. jQuery модальное окно

Аккуратное всплывающее диалоговое окно на jQuery.

12. Модальные окна jQuery

Симпатичные всплывающие модальные окна. Три стилевых оформления. На демонстрационной странице представлено 3 ссылки для вызова окон.

13. Модальные окна jQuery

Всплывающие модальные окна нескольких видов. Для просмотра плагина в действии нажмите на ссылку на демонстрационной странице.

15. Всплывающее поверх страницы сообщение

Сообщение отображается поверх страницы, которая, в свою очередь, затемняется. Нажмите на надпись «Click me» на демонстрационной странице, чтобы увидеть всплывающее сообщение. Нажатие на крестик его закроет. Реализовано с помощью jQuery.

16. Модальное окно «ModalBox» на javascript

Реализация современных модальных диалоговых окон без использования всплывающих окон и перезагрузок страницы. На демонстрационной странице нажмите на кнопку «Start Demo» чтобы посмотреть на работу скрипта.

17. «Leightbox» плагин с использованием библиотеки Prototype

Плагин для отображения контента в модальных окнах.

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

Как сделать всплывающее окно jquery

Всплывающее окно jquery состоит из таких элементов:

фона или затемнения
всплывающего окна
контента всплывающего окна

Итак, как всегда, сначала приступим к верстке HTML.

Заголовок всплывающего окна X

Содержимое всплывающего окна, форма обратной связи или что-то, что вам нужно.

Готово, у нас уже есть затемнение (.popup_overlay), всплывающее окно (.popup), заголовок всплывающего окна (.popup_title), кнопка закрытия всплывающего окна (.closer), и содержимое всплывающего окна (.popup_content).

Теперь нам нужно сделать так, чтобы это всплывающее окно отображалось всплывающим, а не просто так, и чтобы затеменение перекрывало фон.

Popup_overlay{ display: none; background: rgba(0,0,0,.9); width: 100%; height: 100%; position: fixed; top: 0; left: 0; } .popup{ display: none; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,1); width: 600px; height: 500px; position: fixed; top: 50%; left: 50%; margin-left: -300px; margin-top: -250px; } .popup_title{ font-weight: bold; padding: 10px; } .popup_content{ padding: 10px; border-top: 1px solid #ccc; } .closer{ float: right; cursor: pointer; }

Готово. Всплывающее окно jquery оформлено. Если заметили, у самого всплывающего окна и у затеменения стоит display: none, это сделано для того, чтобы всплывающее окно не показывалось на сайте до нужного момента. А теперь добавим отображение всплывающего окна в нужный момент (то есть по нажатию на нужную кнопку).

Всплывающее окно jquery
Ну а теперь код на jquery. Все достаточно просто. Привязывем действие на событие клика на нужную кнопку.

$(function(){ $("button").click(function(){ $(".popup,.popup_overlay").fadeIn(400); //показываем всплывающее окно }); $(".closer,.popup_overlay").click(function(){ $(".popup,.popup_overlay").fadeOut(400); //скрываем всплывающее окно }); });

Готово. Всплывающее окно будет отображаться и скрываться тогда, когда нам нужно (при нажатии на кнопку button и кнопку.closer соответственно).