Модальное окно - чистый CSS - PullRequest
Новая
       19

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

0 голосов
/ 05 сентября 2018

При построении модального режима у меня возникают проблемы с пониманием того, почему тег тега 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;
}

Ответы [ 2 ]

0 голосов
/ 20 октября 2018

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

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

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

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

0 голосов
/ 05 сентября 2018

Основная причина, которую я вижу, заключается в том, что класс .modal имеет цвет фона, который необходимо растянуть, чтобы заполнить весь экран в качестве наложения, в то время как модальное содержимое ограничено в центре экрана.

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

...