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

<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>

.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;
}

$(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();
    });
});

Tags: blockUI, jQuery, plugin, модальное окно

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

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

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

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

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

• Flassya пишет: Март 24th, 2010 at 21:44

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

• CharnaD пишет: Март 24th, 2010 at 21:54

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

• malbur пишет: Апрель 25th, 2010 at 10:53

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

• Александр пишет: Июль 12th, 2010 at 12:15

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

• CharnaD пишет: Июль 12th, 2010 at 12:29

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

• Александр пишет: Июль 12th, 2010 at 12:38

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

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

• Александр пишет: Июль 13th, 2010 at 10:57

  может вопрос не совсем по теме хотя:
  на странице у меня расположены картинки при нажатии на которые открывается соответствеющее модальное окно в которое вставляется соответствующая картинка (данные берутся из базы (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’}});
  });

  });

  спасибо

• Александр пишет: Июль 13th, 2010 at 10:59

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

  Febi

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

  [/php]

• Александр пишет: Июль 13th, 2010 at 11:01

  может вот так вставится [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 пишет: Июль 14th, 2010 at 15:18

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

• Дмитрий пишет: Июль 29th, 2010 at 13:46

  Добрый день
  Скажите, как изменить высоту окна?
  делаю вот так:
  .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]

• Дмитрий пишет: Июль 29th, 2010 at 14:02

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

• CharnaD пишет: Июль 29th, 2010 at 16:41

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

• Дмитрий пишет: Июль 30th, 2010 at 22:02

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

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

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

• saintist пишет: Август 11th, 2010 at 21:08

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

• sashabysik пишет: Август 22nd, 2010 at 02:35

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

• vitaly пишет: Август 27th, 2010 at 16:28

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

• CharnaD пишет: Август 27th, 2010 at 16:39

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

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

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

• Андрей пишет: Август 31st, 2010 at 23:16

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

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

• Андрей пишет: Август 31st, 2010 at 23:17

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

• Александр пишет: Сентябрь 1st, 2010 at 08:08

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

• CharnaD пишет: Сентябрь 1st, 2010 at 19:35

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

Trackbacks

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