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
});