:-)

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

    JS 04.02.2010

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

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

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

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

    А еще я писал про:

    1. Пишем плагин для jQuery. Простая валидация форм.
    2. Простое модальное окно на jQuery
    3. Обзор SimpleModal 1.2.2

    Tags: , , ,

  • 2 комментариев

    WP_Modern_Notepad
    • Riot пишет:
      Февраль 5th, 2010 at 13:21

      Крестик закрытия окна – справа сверху не меняет состояния(когда на него наводят, когда зажимают). А в очень целом мило)

    • CharnaD пишет:
      Февраль 5th, 2010 at 13:25

      Хм, даже не подумал об этом) В принципе это несложно сделать

    Trackbacks

    Оставить комментарий

    Внимание: Комментарии проходят премодерацию. Не надо посылать их несколько раз.

    Это не спам.