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

Я уже писал про создание модальных окон на jQuery с помощью Simplemodal, на этот раз я решил попробовать другой плагин и нашел для себя blockUI. Он потребует jQuery версии не ниже 1.2.3. Итак приступим.

Данные плагина:

  • название: blockUI v2
  • размер: 15,6 кб без сжатия
  • сайт плагина, скачать, демо

На сайте разработчика он выглядит так:

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

$.blockUI.defaults.css.border = ‘0px’; //убираем серую границу $.blockUI.defaults.fadeIn = 100; //ускоряем появление $.blockUI.defaults.fadeOut = 100; //и исчезновение $.blockUI.defaults.css.left = ‘40%’; //окно будет в центре

Этот код нужно вставить в страницу после подключения плагина. Параметр left:40% зависит от ширины окна, в моем случае оно 275 пикселей.

Что же сделать, чтобы окно выглядело как в Windows? Я конечно не мастер верстки, но результат мне вполне подходит. Сначала делаем макет окна и даем ему стили.

<div id=”modal_dialog” style=”display:none; cursor: default” class=”dialog”> <div class=”dialog_title_bar”> <div class=”dialog_caption”>www.charnad.com</div> <div class=”rotes_kreuz”></div> </div> <div class=”dialog_pane”> <div>Наше модальное окошко</div> <div style=”margin-top: 10px;”> <form action=”” method=”POST”> <input type=”button” id=”yes” value=”Да” class=”dialog_button”/> <input type=”button” id=”no” value=”Нет” class=”close_dialog dialog_button” /> </form> </div> </div> </div>

Почему display: none? Потому что плагин автоматически переключит видимость. Теперь CSS:

.dialog { cursor: default; border: 1px solid #000000; }   .dialog form { margin: 0px; }   /* Контейнер с заголовком */ .dialog .dialog_title_bar { height: 17px; padding: 1px; background-image: url(dialog-caption-bg.png) ; }   /* Стиль текста заголовка */ .dialog .dialog_title_bar .dialog_caption { color: black; font-family: sans-serif; font-size: 9pt; text-align: left; padding-left: 5px; padding-top: 1px; }   /* Панель диалога */ .dialog .dialog_pane { background: buttonface; text-align: center; padding-left: 10%; padding-right: 10%; padding-top: 10px; padding-bottom: 10px; }   /* Кнопки диалога */ .dialog .dialog_button { width: 80px; height: 25px; }   /* Красный крест, закрывающий окно */ .dialog .rotes_kreuz { background-image: url(rotes_kreuz.png); width: 28px; height: 15px; position: absolute; right: 3px; top: 3px; float: right; display: block; cursor: pointer; }

Пути к картинкам, конечно же, поставьте свои. Сами картинки можно взять: фон заголовка, крест.

Теперь Javascript, чтобы все у нас прыгало и бегало.

$(document).ready(function() { //По этим кнопкам модальное окно закрывается $(‘.rotes_kreuz, .close_dialog’).click(function() { $.unblockUI(); return false; });   //Эта кнопка будет вызывать наше окно $(‘#show_modal’).click(function() { $.blockUI({message: $(‘#modal_dialog’), css: {width: ‘275px’}}); });   //По кнопке “Да” будет отправляться форма $(‘#modal_dialog #yes’).click(function() { $(‘#modal_dialog form’).submit(); }); });

Leave a Reply

Your email address will not be published. Required fields are marked *