jquery - 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
}

提前致谢。

score 15 · Accepted Answer

15

尝试这个：

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

于 2014-04-01T10:41:35.167 回答

score 3 · Accepted Answer

我有同样的问题，这就是我解决它的方法：

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

现在，vw是 View Width，您希望 Modal Overlay 覆盖整个屏幕。“正确”的措施应该是vh（查看高度），但是当我尝试这样做时，它不起作用。

这是vh 和 vw的链接。

我希望这会有所帮助，
干杯

score 1 · Accepted Answer

尝试类似的东西

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

3 回答 3