Как с помощью JQuery создать простое модальное окно

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

Что мы хотим создать

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

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

HTML

HTML-код прост. Мы хотим, чтобы плагин запускался при возникновении события клика по ссылке, поэтому нам необходимо создать ссылку и добавить класс, чтобы мы позже могли ссылаться на него:

<a href="#" class="paulund_modal">Кликните здесь</a>

Теперь у нас нет никакого CSS, и мы можем переходить непосредственно к созданию плагина простого модального окна JQuery.

Создание JQuery-плагина модального окна

Создайте новый файл JavaScript, назовите его jquery.paulund_modal_box.js и сохраните в той же папке, в которой находится веб-страница:

(function($){// Определение плагина jQuery$.fn.paulund_modal_box = function(prop){// Настройки по умолчаниюvar options = $.extend({height: "250",width: "500",title:"JQuery Modal Box Demo",description: "Example of how to create a modal box.",top: "20%",left: "30%",},prop);return this.click(function(e){ //Здесь помещаются различные вещи}); return this;};})(jQuery);

Приведенная выше базовая структура будет создавать плагин paulund_modal_box, и при возникновении события клика по элементу будет отображать JQuery модальное окно по центру. Я также добавил ряд настроек по умолчанию, которые мы можем использовать, чтобы построить панель.

Сейчас нам необходимо по клику выводить модальное окно. Поскольку мы не используем на странице ни HTML, ни CSS нам необходимо выполнить ряд задач:

  1. Заблокировать остальную часть экрана, чтобы мы могли видеть только модальное окно;
  2. Создать HTML-разметку модального окна;
  3. Задать стили двух новых элементов;
  4. Вывести модальное окно.

Нам необходимо добавить к событию клика следующие возможности:

return this.click(function(e){add_block_page();add_popup_box();add_styles();$('.paulund_modal_box').fadeIn();});

Сейчас у нас есть вызов нужных возможностей, которые мы хотим использовать, давайте добавим их функционал.

Добавление блокировки страницы

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

Мы используем div, который будет охватывать весь экран, в него мы добавим модальное окно.

Создайте возможность add_block_page(), которая создает div и добавляет его в тег body в HTML:

function add_block_page(){var block_page = $('<div class="paulund_block_page"></div>');$(block_page).appendTo('body');}

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

function add_styles(){ /*Блокировка перекрытой страницы*/var pageHeight = $(document).height();var pageWidth = $(window).width();$('.paulund_block_page').css({'position':'absolute','top':'0','left':'0','background-color':'rgba(0,0,0,0.6)','height':pageHeight,'width':pageWidth,'z-index':'10'});}

Сейчас экран заблокирован, и мы можем добавить в div простое модальное окно JQuery.

Создание модального окна

Чтобы создать модальное окно, мы используем возможность add_popup_box():

function add_popup_box(){ var pop_up = $('<div class="paulund_modal_box"><a href="#" class="paulund_modal_close"></a><div class="paulund_inner_modal_box"><h2>' + options.title + '</h2><p>' + options.description + '</p></div></div>');$(pop_up).appendTo('.paulund_block_page'); $('.paulund_modal_close').click(function(){ $('.paulund_block_page').fadeOut().remove();         $(this).parent().fadeOut().remove(); });}

Этот программный код создает div, который включает название, описание и ссылку для закрытия модального окна JQuery. Далее он добавляет модальное окно к блокирующему div и перехватывает событие клика для закрытия панели, чтобы убрать модальное окно.

Нам необходимо задать стили для модального окна, так что добавьте следующий код в возможность add_styles, которую мы создали выше:

$('.paulund_modal_box').css({ 'position':'absolute', 'left':options.left,'top':options.top,'display':'none','height': options.height + 'px','width': options.width + 'px','border':'1px solid #fff','box-shadow': '0px 2px 7px #292929','-moz-box-shadow': '0px 2px 7px #292929','-webkit-box-shadow': '0px 2px 7px #292929','border-radius':'10px','-moz-border-radius':'10px','-webkit-border-radius':'10px','background': '#f2f2f2', 'z-index':'50',});$('.paulund_modal_close').css({'position':'relative','top':'-25px','left':'20px','float':'right','display':'block','height':'50px','width':'50px','background': 'url(images/close.png) no-repeat',});$('.paulund_inner_modal_box').css({'background-color':'#fff','height':(options.height - 50) + 'px','width':(options.width - 50) + 'px','padding':'10px','margin':'15px','border-radius':'10px','-moz-border-radius':'10px',        '-webkit-border-radius':'10px'});

Вот и все, сейчас наш JQuery-плагин завершен.

Готовый JQuery-плагин

На тот случай, если вы пропустили предыдущие шаги, ниже приводится программный код готового плагина модального окна JQuery:

(function($){// Определение плагина jQuery$.fn.paulund_modal_box = function(prop){// Настройки по умолчаниюvar options = $.extend({height: "250",width: "500",title:"JQuery Modal Box Demo",description: "Example of how to create a modal box.",top: "20%",left: "30%",},prop);return this.click(function(e){add_block_page();add_popup_box();add_styles();$('.paulund_modal_box').fadeIn();}); function add_styles(){$('.paulund_modal_box').css({ 'position':'absolute', 'left':options.left,'top':options.top,'display':'none','height': options.height + 'px','width': options.width + 'px','border':'1px solid #fff','box-shadow': '0px 2px 7px #292929','-moz-box-shadow': '0px 2px 7px #292929','-webkit-box-shadow': '0px 2px 7px #292929','border-radius':'10px','-moz-border-radius':'10px','-webkit-border-radius':'10px','background': '#f2f2f2', 'z-index':'50',});$('.paulund_modal_close').css({'position':'relative','top':'-25px','left':'20px','float':'right','display':'block','height':'50px','width':'50px','background': 'url(images/close.png) no-repeat',});                        /*Блокировка перекрываемой страницы*/var pageHeight = $(document).height();var pageWidth = $(window).width();$('.paulund_block_page').css({'position':'absolute','top':'0','left':'0','background-color':'rgba(0,0,0,0.6)','height':pageHeight,'width':pageWidth,'z-index':'10'});$('.paulund_inner_modal_box').css({'background-color':'#fff','height':(options.height - 50) + 'px','width':(options.width - 50) + 'px','padding':'10px','margin':'15px','border-radius':'10px','-moz-border-radius':'10px','-webkit-border-radius':'10px'});} function add_block_page(){var block_page = $('<div class="paulund_block_page"></div>');$(block_page).appendTo('body');}  function add_popup_box(){ var pop_up = $('<div class="paulund_modal_box"><a href="#" class="paulund_modal_close"></a><div class="paulund_inner_modal_box"><h2>' + options.title + '</h2><p>' + options.description + '</p></div></div>'); $(pop_up).appendTo('.paulund_block_page');   $('.paulund_modal_close').click(function(){$(this).parent().fadeOut().remove();$('.paulund_block_page').fadeOut().remove();  });}return this;};})(jQuery);

Использование JQuery-плагина

Мы создали плагин, но как его использовать? Вернитесь к HTML и подключите JQuery и плагин в теге head:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script><script src="jquery.paulund_modal_box.js"></script>

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

Создайте тег script перед закрытием body и добавьте в него следующий код:

<script>$(document).ready(function(){$('.paulund_modal').paulund_modal_box();});</script>

Когда вы нажимаете на ссылку, будет открываться модальное окно, реализованное при помощи созданного плагина. Если вы создадите пару ссылок с классом .paulund_modal, то каждый раз после нажатия на данные ссылки будет отображаться модальное окно.

Использование настроек

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

$(document).ready(function(){$('.paulund_modal').paulund_modal_box();$('.paulund_modal_2').paulund_modal_box({title:'Второй заголовок окна',description:'Пользовательское описание для окна <br/><br/>Quisque sodales odio nec dolor porta sed laoreet mauris pretium. Aenean id mauris ligula, semper pulvinar dolor. Suspendisse rutrum, libero eu condimentum porta, mauris mauris semper augue, ut tempor nunc arcu vel ligula. Quisque orci eros, consequat vel iaculis eget, blandit bibendum est. Morbi ac tellus dui. Nullam eget eros et lectus dignissim placerat. Nulla facilisi. Ut congue posuere vulputate.'});$('.paulund_modal_3').paulund_modal_box({title: 'Настроить заголовок и высоту',height: '500'});$('.paulund_modal_4').paulund_modal_box({title: 'Настроить заголовок и ширину',width: '800'});$('.paulund_modal_5').paulund_modal_box({title:'Second Title Box',description:'Пользовательское описание для окна <br/><br/>Quisque sodales odio nec dolor porta sed laoreet mauris pretium. Aenean id mauris ligula, semper pulvinar dolor. Suspendisse rutrum, libero eu condimentum porta, mauris mauris semper augue, ut tempor nunc arcu vel ligula. Quisque orci eros, consequat vel iaculis eget, blandit bibendum est. Morbi ac tellus dui. Nullam eget eros et lectus dignissim placerat. Nulla facilisi. Ut congue posuere vulputate.',height: '500',width: '800'});});</script>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *