jQuery 模式对话框覆盖不全屏显示

Question

我有一个jquery模式对话框，当你打开它时，它不会完全使屏幕变灰。如果我看一下，它归因于这个 css 代码：

<div class="ui-widget-overlay" style="width: 1920px; height: 628px; z-index: 1001;"></div>

这是来自使用 jquery 的 Themeroller 生成的自定义 css。

不确定为什么要创建这些维度？ 如果我为高度选择更高的数字，它会覆盖更多的屏幕，但我想知道是否有一个值可以用来取整个屏幕。 我尝试100%并auto身高，但他们什么也没做。

对话框

大小很好，只是对话框后面的灰色覆盖层。我希望对话框后面的灰色部分采用全屏的大小。作为参考，这是我正在使用的对话框选项：

var dialogOpts={
    modal:true,
    autoOpen: false,
    resizable:false,
    width: 525
}

提前谢谢。

Answer 1

试试这个：

.ui-widget-overlay {
    position: fixed !important;
}

Answer 2

我遇到了同样的问题，这就是我解决它的方式：

<style>
    .ui-widget-overlay
    {
        height: 100vw;
    }
</style>

现在，vw是视图宽度，您希望模式叠加覆盖整个屏幕。"正确"的测量应该是vh（视图高度），但是当我尝试这样做时，它不起作用。

这是vh和vw的链接。

我希望这有帮助，
干杯

Answer 3

尝试类似

$( "#dialog" ).dialog({
    position: ["left","top"],
    width:"100%",
    height:$(window).height(),
    zIndex: 1000            
});