JQuery Dialog模式选项不起作用

Question

这是HTML代码:

<div id="dialog" title="lala" style="display:none;">
        <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

这是JavaScript

$bb('#addTopicButton').live('click',function() {

     $bb( "#dialog" ).dialog({ modal:true, closeOnEscape: false, draggable:false, resizable:false }); 

       });

为什么模态不起作用？当它打开时,我仍然可以点击页面上的其他链接并在后台执行操作.

非常感谢

更新: 它似乎工作了.只有链接在后台处于活动状态并正常工作.如何禁用所有内容,包括链接？

Answer 1

您可能只需要将jQuery UI CSS包含到您的页面中.

谷歌在其CDN上有这个:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css

对话框上的模态选项会在对话框下创建叠加层,但会覆盖其余内容.这个重叠需要jQuery UI CSS才能正常运行.

Answer 2

刚刚遇到同样的问题.我需要CSS,但我不想要所有这些.所以我只是在我自己的CSS代码中复制粘贴这部分:

.ui-widget-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #aaaaaa;
    opacity: 0.3;
}

Answer 3

仅将.ui-widget-overlay添加到css将使叠加显示在完整的顶部,甚至对话框也将无法使用.

因此,也应该添加.ui-front类:

.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ui-front {
    z-index: 100;
}