使用 SimpleModal JS 创建一个模态来填充浏览器窗口。答案

【问题标题】：Using SimpleModal JS to create a modal to fill the browser window.使用 SimpleModal JS 创建一个模态来填充浏览器窗口。
【发布时间】：2013-08-20 17:50:18
【问题描述】：

我在我的一个项目中使用Simplemodal JQuery 插件。我试图让模态填充整个浏览器窗口，但似乎遇到了麻烦。在 CSS 中将模态容器的宽度和高度显式设置为 100% 并不能解决问题。

我也在尝试使用minWidth 和minHeightoptions，但这仍然行不通。有什么建议吗？

【问题讨论】：

标签： javascript jquery simplemodal

【解决方案1】：

只需调用 modal 并传递明确的 css 参数即可：

$('#basicModalContent').modal({containerCss: {left: 0, top: 0, width: '100%', height: '100%'}});

【讨论】：

我想知道 100% 是否有效。如果没有，请尝试：width: $(window).width()
如果这很好用，虽然因为它们为您提供了只接受像素值的默认选项，但我想知道这个方法是否会针对包装 $('#basicModalContent') 的 div 跨度>
是的，我怀疑 '%' 会起作用，因为你所说的——参数只接受一个数字。 $(window).width() 将返回一个数字，所以我猜应该可以。
糟糕，抱歉。正常工作应该是这样的：$('#basicModalContent').modal({containerCss: {left: 0, top: 0, width: '100%', height: '100%'}});
"%" 就像一个魅力，因为 containerCss 对象的键/值对刚刚传递给 jQuery css 方法。

【解决方案2】：

嗯，模态框将有position: absolute，因此您将无法使用 100% 的宽度和高度来填充视口。

这是来自 simplemodal 文档：

maxHeight [Number:null] 容器的最大高度。如果不指定时，使用窗口高度。

maxWidth [Number:null] 容器的最大宽度。如果不指定时，使用窗口宽度。

因此，当您实例化一个简单模式时，只需为这些选项添加一个非常高的数字。它应该使它填满视口：

$("#element-id").modal({
  maxHeight: 10000,
  maxWidth: 10000
})

如果这不起作用，您始终可以使用 $(window).height() 和 $(window).width() 获取视口的高度。然后你可以显式设置模态：

var windowHeight = $(window).height();
$('#modal-id').height( windowHeight );

您必须测试所有浏览器，因为在某些情况下它可能看起来很时髦。

【讨论】：

其实我觉得如果我没记错的话默认是固定位置的。不过谢谢！打算试一试。
我更新了答案。我认为最好尝试使用插件的内置功能，但如果它不起作用，您可以很容易地更改模态尺寸。

【解决方案3】：

jQuery“模态对话框”只是页面上所有其他元素之上的一个 div，通常具有覆盖其余区域的半透明背景。 i-frame 具有受限的比例。

你也许可以参考parent.window，所以modal不局限于iframe区域。

在父页面上有一些脚本来执行请求可能更容易。

【讨论】：