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 and vw的链接。

我希望这有帮助，
干杯

Answer 3

尝试类似

的内容

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