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

我看到的主要原因是col2类具有背景色，需要拉伸以覆盖整个屏幕作为覆盖层，而模态内容则限制在屏幕的中央。

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

Answer 2

您仍然可以将其嵌套在标记中。

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

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

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

模态窗口-纯CSS

2 个答案: