0

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

2 回答 2

1

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

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

于 2018-09-05T00:33:05.233 回答
0

您仍然可以在不将它们嵌套在标记中的情况下进行操作。

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

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

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

于 2018-10-19T23:59:34.323 回答