1

我在我的一个项目中使用Simplemodal JQuery 插件。我正在尝试使模态填充整个浏览器窗口，但似乎遇到了麻烦。在 CSS 中将模态容器的宽度和高度显式设置为 100% 并没有起到作用。

我也在尝试使用minWidthandminHeight选项，但这仍然没有成功。有什么建议吗？

4

3 回答 3

2

只需modal使用传递的显式 css 参数调用：

$('#basicModalContent').modal({containerCss: {left: 0, top: 0, width: '100%', height: '100%'}});
于 2013-08-20T18:15:12.277 回答
1

好吧，模态框将具有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 );

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

于 2013-08-20T18:02:36.713 回答
0

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

您也许可以引用 parent.window，因此模态不限于 iframe 区域。

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

于 2013-08-20T18:07:02.870 回答