模态窗口只用CSS

Modal window with just CSS

本文关键字：CSS 窗口 模态      更新时间：2023-09-26

这是可能的，还是我必须使用JavaScript来设置模态高度到主体高度?例如:

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

我不能使用这个CSS:

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

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

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

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

所以，如果你想让它相对于浏览器的左上角定位，请确保modal元素没有嵌套在页面其他位置的另一个定位元素中。

相关文章：