Как отключить все клики за пределами модального диалога jquery?

Question

На моей странице есть модальное диалоговое окно, которое загружает сайт в iframe по щелчку ссылки. Вот Jquery:

$(function() { 
    $('.open-dialog').click(function() { 
     $('#win-dialog').show().find('#iframeContainer').html('<iframe src="' + this.href + '">  </iframe>'); 
     $('#dialog-overlay').fadeTo(400, 0.8); 
     return false; 
    }); 
    $('#win-dialog .close').click(function() { 
     $('#win-dialog').fadeOut('normal', function() { 
      $('iframe', this).remove(); 
     }); 
     $('#dialog-overlay').hide(); 
     return false; 
    });  
}); 

А вот HTML-

<div id='win-dialog'> 
<h3 class='title'><a class='close' href='#'>&amp;times;</a></h3> 
<div class='isi-dialog'> 
<div id='iframeContainer'/> 
</div> 
</div> 
<div id='dialog-overlay'/> 
<p> <a class='open-dialog' href='http://google.com'>Click here to open dialog</a> </p> 

Как говорит вопрос, я хочу, чтобы отключить все щелчки за пределами модального диалога, как и яваскрипт по умолчанию предупреждения всплывающего окно делает. Как я могу это получить. Пожалуйста, помогите мне.

Answer 1

В CSS высоты сесть: 100%, ширина: 100%; диалогового-наложению

 .dialog-overlay{ 
      height:100%; 
      width:100%; 
      position:fixed; 
      top:0px; 
      left:0px; 

     } 

С выше кодом диалогового-наложению будет размещен в верхней части страницы и с шириной & высотой 100%;

В случае, если вы не хотите, высота 100% & ширина

<div class='outer> 
    <div class='dialog-overlay'><!-- your div --> 
     . 
     . <!-- Content --> 

    </div> 
    </div> 

В CSS сделать

.outer{ 
     position:fixed; 
     height:100%; 
     width:100%; 
     top:0px; 
     left:0px; 
     } 
    .dialog-overlay{ /* adjust according to your requriement */ 
     top:35%; 
     left:40%; 
     } 

Answer 2

Если у вас правильно установленный оверлейный div, это будет захватывать клики, и ничего не произойдет. Кажется, у вас это есть.

Надеется, что это помогает, веселит