模态窗口 - 纯 CSS答案

【问题标题】：Modal Window - Pure CSS模态窗口 - 纯 CSS
【发布时间】：2018-10-20 08:14:02
【问题描述】：

在构建模式时，我很难理解为什么文章标签必须嵌套在这个 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;
}

【问题讨论】：

标签： html css nested modal-dialog pure-css

【解决方案1】：

我看到的主要原因是.modal 类的背景颜色需要拉伸以覆盖整个屏幕，而模态内容被限制在屏幕中心。

如果您不介意丢失叠加层，可以重写。

【讨论】：

【解决方案2】：

您仍然可以在不将它们嵌套在标记中的情况下做到这一点。

但是在 HTML 中像 <div class="myDiv"></div> 这样的 div 没有意义，因为 HTML 描述了页面的结构，所以最好不要有空的 div 或容器。

嵌套它们的另一个原因是：
<article> 相对于它在固定容器内的正常位置定位，因此 <article> 将与 .model div 一起滚动。

如果您在这种情况下没有嵌套它们，.model 会滚动，但 <article> 不会。

【讨论】：