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
}

谢谢您提前的支持。

- Tom

Answer 1

试一下这个：

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

- JavaMejo

---

不是提问者，但我想添加一条评论，说我也遇到了这个问题，这个答案对我有用。 - Frank

Answer 2

我也遇到了同样的问题，这是我解决的方法：

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

现在，vw是视口宽度，您希望模态叠加层覆盖整个屏幕。 "正确"的度量应该是vh（视口高度），但我尝试过，它无效。

这是一个关于vh和vw的链接。

希望这能帮到您，
祝好

- Jason Cidras

Answer 3

试试这样的东西

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

- V.Rashkov

---

我认为你所建议的是更改模态对话框的大小。但那不是我想要的。我只想更改覆盖层，也就是对话框后面的灰色部分。现在它没有全屏显示。 - Tom

为什么不倒过来做，像我代码里设置一样，将标题背景改成你想要的尺寸。效果应该是相同的。或者如果你想保持对话框中其他部分不改变，不要将其拉伸到整个屏幕，只需设置一些宽度/高度，然后将整个对话框拉伸即可。 - V.Rashkov

我在几个地方使用对话框。有时它只有一些文本，而其他时候则有表单。拉伸对话框看起来很糟糕。 - Tom