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

Question

我在我的项目中使用Simplemodal JQuery插件。我试图让模态填满整个浏览器窗口，但似乎遇到了麻烦。在CSS中显式地将模态容器的宽度和高度设置为100％并不会发挥作用。

我正在尝试使用minWidth和minHeight选项，但仍然没有成功。有什么建议吗？

Answer 1

只需通过明确的css参数调用modal：

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

Answer 2

嗯，模态会有position: absolute，所以你将无法使用100％的宽度和高度来填充视口。

这是来自simplemodal docs：

  

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

     

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

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

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

如果这不起作用，您总是可以使用$（window）.height（）和$（window）.width（）获取视口的高度。然后你可以明确地设置模态：

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

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

Answer 3

jQuery“模态对话框”只是页面上的div，位于所有其他元素之上，通常具有覆盖该区域其余部分的半透明背景。 i帧具有受限制的比例。

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

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