如何禁用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>

如問題所述，我想禁用模式對話框之外的所有點擊，就像javascript默認警報彈出窗口一樣。 我怎么才能得到它。 請幫我。

Answer 1

如果您有一個正確設置的重疊div，它將捕獲點擊次數，並且不會發生任何事情。 看來你有。

希望這會有所幫助，歡呼

Answer 2

在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%;
      }