javascript - 只有 CSS 的模态窗口

Question

这可能吗，还是我必须使用 JavaScript 将模态高度设置为身体高度？例如：

$('.modal').height($('body').height())

我不能使用这个 CSS：

.modal{
  position: relative;
  height: 100%;
}

因为模态父级高度是根据其他子级计算的。

Answer 1

您可以使用上面列出的 CSS，但使用绝对定位。

.modal {
    position: absolute;
    height: 100%;
    width: 50%;
    top: 0;
    left: 0;
}

请记住，元素将相对于其第一个定位的祖先进行定位。

因此，如果您希望它相对于浏览器的左上角定位，请确保模态元素没有嵌套在页面其他位置的另一个定位元素内。