使用SimpleModalJS创建一个模式来填充浏览器窗口

Using SimpleModal JS to create a modal to fill the browser window.

本文关键字：模式 填充 浏览器 窗口 一个 创建 SimpleModalJS 使用      更新时间：2023-09-26

我在我的一个项目中使用Simplemodal JQuery插件。不过，我正试图让模态填充整个浏览器窗口，但似乎遇到了问题。从CSS中的with显式地将模式容器的宽度和高度设置为100%并没有起到什么作用。

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

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

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

好吧，模态将有position: absolute，所以您将无法使用100%的宽度和高度来填充视口。

这来自simplemodal文档：

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

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

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

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

如果这不起作用，你总是可以用$（window）.height（）和$（windows）.width（）来获得视口的高度。然后你可以显式地设置模式：

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

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

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

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

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

相关文章：