Модальное окно 


Модальное окно

Опубликовано

 

В статье представлен способ реализации всплывающего модального окна. Сценарий создания окна, представлен в виде плагина написанного на 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);

Более подробную информацию по написанию плагина, читайте в статье Плагин на 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>