:-)
  • 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. Обзор SimpleModal 1.2.2
    3. Судоку на PHP и jQuery

    Tags: , , ,

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

    WP_Modern_Notepad
    • Riot пишет:

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

    • CharnaD пишет:

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

    • Flassya пишет:

      Простите, но как подключить плагин?

    • CharnaD пишет:

      Вот так:
      <script type=’text/javascript’ src=’http://www.charnad.com/files/blockui-modal-demo/jquery.blockUI.js’></script>
      Вместо урла вставьте правильный путь к тому месту, где у вас лежит плагин

    • malbur пишет:

      Долго искал подобный плагин! Отлично работает! Спасибо

    • Александр пишет:

      да проблем с работой плагина нет … но вот к примеру создать две кнопки для работы с этим плагином не получилось отрабатывает та кнопка которая находится первой на страницы..
      если возможность решить данную проблему???
      спасибо

    • CharnaD пишет:

      Расскажите подробнее? Если с кодом – то лучше на мыло. Может быть вы выбираете кнопку по классу, который есть еще и у других кнопок? Или id неуникальный?

    • Александр пишет:

      спасибо …
      разрешилась проблема, вот таким образом поменял в кнопке id=»show_modal» на class=»show_modal»

      и соответственно в скрипте #show_modal на .show_modal
      $(‘.show_modal’).click(function() {
      $.blockUI({message: $(‘#modal_dialog’), css: {width: ’275px’}});
      });
      и теперь любое количество кнопок либо картинок с class=»show_modal» работают

    • Александр пишет:

      может вопрос не совсем по теме хотя:
      на странице у меня расположены картинки при нажатии на которые открывается соответствеющее модальное окно в которое вставляется соответствующая картинка (данные берутся из базы (mySQL) в итоге получается вот такой код на каждую картинку свой(вырезка с кода)

      Febi

      Упругий элемент, крышка багажника / помещения для груза

      как видно в окне находится картинка src=»/html/images/detail/Febi28017.jpg»>, вот размер вот этой каринки я хочу получить дабы вставлять в параметры для отображения картинок различных размеров
      стандартным образом
      var width =$(param).find(‘img’).width(); где param=#28017
      не получается

      вот скрипт

      $(document).ready(function() {
      //По этим кнопкам модальное окно закрывается
      $(‘.rotes_kreuz, .close_dialog’).click(function() {
      $.unblockUI();
      return false;
      });

      //Эта кнопка будет вызывать наше окно
      $(‘.show_modal’).click(function() {
      var param =$(this).attr(‘alt’);

      var width =$(param).find(‘img’).width();

      $.blockUI({message: $(param), css: {width: ’350px’}});
      });

      });

      спасибо

    • Александр пишет:

      код к верхнему сообщению
      [php]

      Febi

      Упругий элемент, крышка багажника / помещения для груза

      [/php]

    • Александр пишет:

      может вот так вставится [img alt="#28017" class="show_modal" src="/html/images/photo.gif"][!-- создание модального окна --]
      [div class="dialog" style="cursor: default; display: none;" id="28017"]
      [div class="dialog_title_bar"]
      [div class="dialog_caption"]Febi[/div]
      [div class="rotes_kreuz"][/div]
      [/div]
      [div class="dialog_pane"]
      [div]Упругий элемент, крышка багажника / помещения для груза[/div]
      [img alt="Упругий элемент, крышка багажника / помещения для груза" src="/html/images/detail/Febi28017.jpg" style=""]
      [/div]
      [/div]

    • CharnaD пишет:

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

    • Дмитрий пишет:

      Добрый день
      Скажите, как изменить высоту окна?
      делаю вот так:
      .dialog {
      cursor: default;
      border: 1px solid #000000;
      width: 800px;
      height: 300px;
      }

      а мне в ответ вот так
      [url=http://pikucha.ru/598586][img]http://pikucha.ru/598586/image.jpeg[/img][/url]

    • Дмитрий пишет:

      и как например задать высоту\ширину окна в процентах, чтобы при разных разрешениях мониторов окно выглядело пропорционально?

    • CharnaD пишет:

      Попробуйте выставить .dialog высоту в процентах.
      .dialog {
      ….
      height: 20%
      }

    • Дмитрий пишет:

      на самом деле высоту\ширину нужно выставлять здесь
      $.blockUI({message: $(‘#modal_dialog’), css: {width: ’90%’, height: ’90%’}}); это относительно страницы

      а в css уже выставляется высота\ширина в процентах относительно #modal_dialog.

      спасибо за быстрый ответ

    • saintist пишет:

      использовал simplemodal но уж очень он simple )) приходилось допиливать очень хорошо, а это просто великолепный плагин

    • sashabysik пишет:

      Не работает это говно !

    • vitaly пишет:

      вопрос как сделать так чтобы это окно открывалось при открытии окна сайта, то есть открывалось автоматически

    • CharnaD пишет:

      $.blockUI({message: $(‘#modal_dialog’), css: {width: ’275px’}});

      вот так в коде. то есть не вешать на клик.

      можно так же это положить в $(document).ready

    • Андрей пишет:

      Я уже плачу!!!

      Я не часто прибегаю к jQuery, но тут беда совсем….
      Не могу сделать чтобы открывалось через

    • Андрей пишет:

      обычныую текстовую ссылку.

    • Александр пишет:

      Извени Андрюха ну ты просто тормоз

    • CharnaD пишет:

      Андрей, в посте собственно написано как. Просто этой ссылке надо вручить id, и на него повесить событие click, или в ссылке onclick прописать.

    Trackbacks

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

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