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

CharnaD — Thu, 04 Feb 2010 18:53:35 +0000

Я уже писал про создание модальных окон на 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? Я конечно не мастер верстки, но результат мне вполне подходит. Сначала делаем макет окна и даем ему стили.

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

Почему 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();
    });
});

Можно скачать:[filebase:file:file=3:tpl=simple] или посмотреть прямо здесь.

При желании, вы легко можете добавлять поля в форму диалога. У этого плагина есть еще одна интересная черта - оповещения типа Growl (оповещение вверху справа), о котором я надеюсь написать в следующий раз.

В лабиринте извилин » модальное окно

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