Модальное окно с использованием jQuery
Последние веяния моды в стиле веб 2.0 принесли с собой много возможностей, которые ранее были доступны только настольным приложениям. Современные браузеры поддерживают CSS и Javascript на уровне, вполне достаточном для реализации модальных окон. Модальное окно представляет собой окно, которое полностью перехватывает на себя фокус, не давая пользователю взаимодействовать с какими-либо другими окнами на экране. Сегодня рассмотрим способ создания такого окна с использованием библиотеки jQuery. В итоге мы получим что-то вроде этого:
Для начала создадим простую HTML-страницу, содержащую два <div>-блока:
- popupContact - модальное окно;
- backgroundPopup - затемнение.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; windows-1251" />
<title>Модальное окно с использованием jQuery</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
<script src="popup.js" type="text/javascript"></script>
</head>
<body>
<center>
<a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
<div id="button"><input type="submit" value="Press me please!" /></div>
</center>
<div id="popupContact">
<a id="popupContactClose">x</a>
<h1>Title of our cool popup, yay!</h1>
<p id="contactArea">
Here we have a simple but interesting sample of our new stuning and smooth popup.
As you can see jQuery and CSS does it easy...
<br/><br/>
We can use it for popup-forms and more... just experiment!
<br/><br/>
Press ESCAPE, Click on X (right-top) or Click Out from the popup to close the popup!
<br/><br/>
<a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
</p>
</div>
<div id="backgroundPopup"></div>
</body>
</html>
Файл стилей нашей HTML-страницы:
line-height:1;
font-size: 12px;
font-family:arial,sans-serif;
margin:0;
}
img {
border:0;
}
a {
cursor: pointer;
text-decoration:none;
}
br.both{
clear:both;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6 */
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6 */
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
color:#6FA5FD;
font-size:22px;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose {
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:bold;
display:block;
}
#button{
text-align:center;
margin:100px;
}
Вот как это будет выглядеть в браузере:
Теперь JavaScript (файл popup.js):
var popupStatus = 0;
function loadPopup(){
// Открываем окно только если оно закрыто
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
function disablePopup(){
// Закрываем окно только если оно открыто
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
function centerPopup(){
// ширина и высота окна браузера
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
// размещаем окно в центре страницы
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
// только для MS IE 6
$("#backgroundPopup").css({
"height": windowHeight
});
}
$(document).ready(function(){
// ОТКРЫТИЕ ОКНА
// Событие - щелчек по кнопке
$("#button").click(function(){
// размещаем окно в центре страницы
centerPopup();
// открываем окно
loadPopup();
});
// ЗАКРЫТИЕ ОКНА
// Событие - щелчок по "x"
$("#popupContactClose").click(function(){
// закрываем окно
disablePopup();
});
// Событие - щелчок за пределами окна
$("#backgroundPopup").click(function(){
// закрываем окно
disablePopup();
});
// Событие - нажата клавиша Escape
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1) {
// закрываем окно
disablePopup();
}
});
});
Ссылки по теме:
AdrianMG:
Thanks for the referral
21 Ноябрь 2008, 14:47Алексей Качаев:
Симпатично, но я лично пользуюсь jqModal - плагин для jQuery.
24 Ноябрь 2008, 3:06dap:
Определенно, использовать плагины на много легче
24 Ноябрь 2008, 16:06Дима:
Спасибо поучительно, только непонял зачем centerPopup() дается “position absolute” если в стайлах “position fixed”
5 Январь 2009, 13:11Вит:
так, а как создать допустим два диалоговых окна, или три..
5 Январь 2009, 23:33что то я не разобрался с дивами..
Sklo-ua:
jqModal - плагин для jQuery
15 Январь 2009, 22:32Поддерживаю товарища!
Ruslan:
Чем не подхотят стандартные окна которые предлагается создавать с помощью jQuery
10 Май 2009, 22:42http://jqueryui.com/demos/dialog/
ESP:
В IE6 если у окна есть скроллинг, то нижняя прокручиваемая часть не блокируется заливкой. А вообще - мне понравилось, более легковесный, чем тот же jqModal.
17 Июнь 2009, 14:00Виктор:
Если страница большая, и кнопка вызова модального окна находится где-то внизу, то модальное окно не видно, так как оно появляется где-то сверху. Приходится прокручивать страницу вверх, чтобы увидеть окно.
27 Январь 2010, 8:30Hamlet:
Большое спасибо! Долго искал как сделать модальное окно не используя никаких плагинов!
Респект автору!
26 Март 2011, 18:51