Закрытие диалога при клике вне его
 

Добрый день, дорогие форумчане
Битый час сижу, и никак не могу понять, как реализовать мою задумку.
У меня на сайте есть несколько диалоговых окон
Всё реализовано так
HTML Код:

<div class="header">
</div>
<div class="wrapper">
   <div class="description">
      <button class="descr_but"></button>
      <div class="description_block" title="Описание 2">
          <p>Какой-то текст 2</p>
      </div>
   </div>
   <div class="description">
      <button class="descr_but"></button>
      <div class="description_block" title="Описание">
          <p>Какой-то текст</p>
      </div>
   </div>
</div>
<div class="footer">
</div>

Код JQ:

$(document).ready(function () {
    var dialogBox = $('.description_block').dialog({
        autoOpen: false,
        show: {
            effect: 'blind',
            duration: 1000
        },
        hide: {
            effect: 'fold',
            duration: 1000
        }
    });
    
    $('.descr_but').click(function () {
         dialogBox.eq($(this).index('.descr_but')).dialog('open');
});

Мне нужно, чтобы диалоговое окно ".description_block" закрывалось при нажатии на любую область вне его.
Я пробовал делать так:

$("body").not(".description").not(".descr_but").not(".description_block").click(function(){
   $(".description_block").dialog("close");
});

Но когда я нажимаю на кнопку ".descr_but" после появления диалоговое окно сразу же закрывается.
Помогите пожалуйста советом
Заранее спасибо.

Опции такой не вижу. Примерный план - событие create, в нем навешивать обработчик на оверлей. Возможно придется смотреть код реализации.

Как грязный хак:

$('.ui-widget-overlay').click(function() {
    $(this).prev().dialog('close');
});

Прошу прощения за мою глупость, но я не понял совсем ничего)

QNester,
modal: true и тогда

$("body").on("click",".ui-widget-overlay",function() {
      $(".description_block").dialog("close")
})

или так без параметра модальносьти

$(document).on("click", function (event) {
        if ($(".ui-dialog").has(event.target).length === 0) $(".description_block").dialog("close") ;
    });

Спасибо большое! Второй раз меня спасаете :)
C модулем всё заработало, а без модуля почему так же: сначала открывается диалог, а потом сразу же закрывается

Залезу и я со своими 5 копейками - так можно и без модальности и с модальностью

$(document).click(function(e){
if(!$(e.target).closest('.ui-dialog').length) {
$(".description_block").dialog("close"); 
}
})

QNester, какой тогда смысл в не-модальности если работать будет все же как модальный?

отмените всплытие в клике по кнопке открытия

$('.descr_but').click(function (*!*event*/!*) {
        *!* event.stopPropagation();*/!*
         dialogBox.eq($(this).index('.descr_but')).dialog('open');
});

Хотел было сделать нормально, по событию, через ссылку в виджете на оверлей. Посмотрел код реализации - и чета приуныл... Короче jquery ui - гавно. Оверлей создается при первом open(). В конце метода триггерится событие open, но параметр ui при этом - пустой объект, сцукко!