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

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

因此，应该添加.ui-front类：

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

Answer 4

我遇到了同样的问题，几乎以与进入“ jquery-ui.theme.css”文件搜索“ .ui-widget-overlay”并将其块从以下位置更改时相同的方式解决了这个问题：

.ui-widget-overlay {
    background: #A9BCD0;
    opacity: 1;
    filter: Alpha(Opacity=100); /* support: IE8 */
}

到

.ui-widget-overlay {
    background: #A9BCD0;
    opacity: .3;
    filter: Alpha(Opacity=30); /* support: IE8 */
}

JQuery Dialog模式选项不起作用

4 个答案: