带有空白屏幕的 Jquery 模态对话框

Question

我正在加载一个 Jquery 模式弹出窗口，如下所示：-

<script type="text/javascript">

$(document).ready(function () {

    $('.modal_part').fadeIn('slow');
    $('#tn_select').load('MyPopup.aspx');
});


</script>

css如下：-

.modal_block
{
   background: rgba(0, 0, 0, 0.3);
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
}

.modal_part
{
   z-index: 100;
   display: none;
}

.modal_dialog
{
   width: 50%;
   position: absolute;
   top: 5%;
   left: 25%;
   padding: 1%;
   border-radius: 10px;
   border: 0;
   background: #fff;
   box-shadow: 0 0 5px #000;
}

如何使屏幕的其他部分（背景）变灰，并且用户无法点击此模式对话框以外的任何内容？

感谢您的帮助和时间

Answer 1

使用jquery的http://api.jqueryui.com/dialog/#option-modal

$(".modal_part").dialog({ 
     modal: true   //pass this while initializing dialog
});