模态窗口 - 纯 CSS

Question

在构建模态时，我很难理解为什么文章标签必须嵌套在这个div标签中才能打开模态。如果有人能解释为什么这是必要的，并且可能是一个解决方案，我将不胜感激！

<a href=#modal__open>More Info</a>
<div id="modal__open" class="modal">
<article>
<a href="#close" title="Close" class="modal__close">X</a>
<h3>Lorem Ipsum Dolor</h3>
<h4><time>2018-01-01</time></h4>
<p>Consectetur adipisicing elit, sed do eiusmod elit ....</p>
</article>
</div>

--.CSS

.modal {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
opacity: 0;
z-index: 99;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modal:target {
opacity: 1;
pointer-events: auto;
}
.modal > article {
position: relative;
width: 400px;
margin: 10% auto;
padding: 5px, 20px, 13px, 20px;
background: #fff;
}
.modal__close {
position: absolute;
top: -10px;
right: -12px;
background: #797979;
color: #ffffff;
text-decoration: none;
line-height: 25px;
text-align: center;
width: 24px;
}

Answer 1

我看到的主要原因是.modal类的背景颜色需要拉伸以填充整个屏幕作为叠加层，而模态内容则限制在屏幕中央。

如果您不介意丢失覆盖层，则可以重写。