只有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;
}

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

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