Модальное окно - чистый CSS

Question

Когда я создаю модальный режим, у меня возникают проблемы с пониманием того, почему тег тега article должен быть вложен в этот тег 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 Класс имеет цвет фона, который необходимо растянуть, чтобы заполнить весь экран в качестве наложения, в то время как модальное содержимое ограничено в центре экрана.

Может быть возможно переписать, если вы не против потерять оверлей.

Answer 2

Вы все еще можете сделать это, не вкладывая их в разметку.

но в HTML такой div <div class="myDiv"></div> не имеет смысла, потому что HTML описывает структуру страницы, поэтому всегда лучше не иметь пустых элементов div или контейнеров.

Еще одна причина их вложения:
<article> расположен относительно его нормального положения внутри неподвижного контейнера, так что <article> прокрутить с .model дела.

если вы не вложили их в этот случай .model будет прокручивать но <article> не буду.