Я уже писал про создание модальных окон на 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(); }); });
Можно скачать:
blockUI demo (31.1 KiB)
При желании, вы легко можете добавлять поля в форму диалога. У этого плагина есть еще одна интересная черта - оповещения типа Growl (оповещение вверху справа), о котором я надеюсь написать в следующий раз.
А еще я писал про:










Февраль 5th, 2010 at 13:21
Крестик закрытия окна – справа сверху не меняет состояния(когда на него наводят, когда зажимают). А в очень целом мило)
Февраль 5th, 2010 at 13:25
Хм, даже не подумал об этом) В принципе это несложно сделать