[QNester]

Добрый день, дорогие форумчане
Битый час сижу, и никак не могу понять, как реализовать мою задумку.
У меня на сайте есть несколько диалоговых окон
Всё реализовано так
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" после появления диалоговое окно сразу же закрывается.
Помогите пожалуйста советом
Заранее спасибо.