В статье представлен способ реализации всплывающего модального окна. Сценарий создания окна, представлен в виде плагина написанного на jquery. Для оформления окна были применены стилевые свойства языка CSS.
Код плагина на jquery
Плагин является основным инструментом для создания модального окна, его сценарий вставляет в структуру DOM документа новый div блок (модальное окно), устанавливает его размеры и позицию на экране. Помимо этого плагин добавляет в документ специальный блок, который принимает размеры всего экрана, и играет роль фона, к тому же он блокирует доступ к документу до тех пор, пока модальное окно не будет закрыто.
Приступим к написанию плагина modalWindow(), создайте файл, желательно с таким же названием, jquery.modalwindow.js, и поместите в него нижеследующий код:
(function($){
$.fn.modalWindow=function(options){
//НАСТРОЙКИ ПО УМОЛЧАНИЮ
$settings=$.extend({
width:300,
height:200
},options);
return $(this).click(function(){
//ФОН ПОД ВСПЛЫВАЮЩИМ ОКНОМ
$("<div class='background'></div>")
.css({
"width":$(window).width()+"px",
"height":$(window).height()+"px"
})
.appendTo("body");
//СОДЕРЖИМОЕ ВСПЛЫВАЮЩЕГО ОКНА
var $content="";
$content+="<img src='imgs/close.png' />";
$content+="<h1>Модальное окно</h1>";
//ВСПЛЫВАЮЩЕЕ ОКНО
$("<div class='modalwindow'></div>")
.css({
"width":$settings.width+"px",
"height":$settings.height+"px",
"top":($(window).height()/2-$settings.height/2)+"px",
"left":($(window).width()/2-$settings.width/2)+"px"
})
.append($content)
.appendTo("body")
.children("img")
.click(function(){
//СКРЫТИЕ С ЭКРАНА МОДАЛЬНОГО ОКНА
$("div.background").hide().remove();
$("div.modalwindow").hide().remove();
});
});
}
})(jQuery);
Стилевой файл для оформления модального окна
Оформление модального окна желательно вынести в отдельный стилевой файл. Создайте файл и поместите в него нижеследующие свойства.
/* ОФОРМЛЕНИЕ ФОНА ПОД ВСПЛЫВАЮЩИМ ОКНОМ */
div.background{
position: fixed;
z-index:90;
top:0;
left:0;
background-color: #fff;
opacity:0.7;
filter:alpha(opacity=70); /*FOR IE*/
}
/* ОФОРМЛЕНИЕ ВСПЛЫВАЮЩЕГО ОКНА */
div.modalwindow{
position:fixed;
z-index:100;
padding:5px;
background-color:#F7F7F7;
border:1px solid #EDEDED;
/* Закругление углов кнопки: */
-moz-border-radius: 5px;
-webkit-border-radius:5px;
border-radius: 5px;
/* Тень отбрасываемая окном */
-webkit-box-shadow:0 0 6px 3px #F2F2F2;
-moz-box-shadow: 0 0 6px 3px #F2F2F2;
box-shadow: 0 0 6px 3px #F2F2F2;
}
div.modalwindow img{
float:right;
cursor:pointer;
}
div.modalwindow h1{
font:bold 15px "Tahoma";
text-align:center;
}
Сборка компонентов в основном файле
Когда все компоненты модального окна готовы, необходимо собрать их в основном файле, и активизировать плагин. В заголовке документа подключите плагин и стилевой файл, не забудьте про библиотеку jquery. После необходимо добавить небольшой скрипт, который привяжет плагин к ссылке (id= "modalwindow"), при клике по которой собственно и будет всплывать модальное окно. Ну и в заключении, необходимо разместить ссылку в теле документа.
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.modalwindow.js"></script>
<script>
$(document).ready(function(){
$("#modalwindow").modalWindow({
width:300,
height:200
});
});
</script>
<link href="css/modalwindow.css" rel="stylesheet" />
</head>
<body>
…
<a href="#" id="modalwindow">Модальное окно</a>
…
</body>