JQuery对话框模式选项不工作

JQuery Dialog modal option not working

本文关键字：工作 选项 模式 对话框 JQuery      更新时间：2023-09-26

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

为什么模态不工作?当它被打开时，我仍然可以点击页面上的其他链接并在后台做事情。

Thanks a lot

更新:不过，它似乎正在起作用。只有链接在后台活动并工作。如何禁用所有内容，包括链接?

您可能只需要在您的页面中包含jQuery UI CSS。

Google在CDN上有这个:

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

对话框上的模态选项创建了一个覆盖在你的对话框下，但在其余内容之上。这个叠加需要jQuery UI CSS才能正常工作。

刚刚遇到了同样的问题。我需要CSS，但我不想要全部。所以我把这部分复制粘贴到我自己的CSS代码中:

.ui-widget-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #aaaaaa;
    opacity: 0.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;
}

我有同样的问题，我用几乎相同的方法解决了它，我进入'jquery-ui.theme.css'文件搜索'。Ui-widget-overlay '并将block从:

.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 */
}
相关文章：