CODEWITHSUNDEEP
htmlcssnestedmodal-dialogpure-css
ALW
ALW

Reputation: 3

Modal Window - Pure CSS

When building a modal, I have trouble understanding why the article tag has to be nested within this div tag for opening a modal. If anyone could explain why this would be necessary, and possibly a solution to do without, I would greatly appreciate it!

<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;
}

Upvotes: 0

Views: 704

Answers (1)

Daniel Bernardi
Daniel Bernardi

Reputation: 507

The main reason I see is that the .modal class has a background color that needs to stretch to fill the whole screen as an overlay, while the modal content is constrained in the center of the screen.

It might be possible to rewrite if you don't mind losing the overlay.

Upvotes: 1

Related Questions