CSS-only Modal

css-only-modal.markdown

CSS-only Modal

A Pen by Blueport UI Dev Team on CodePen.

License.

index.html

<div class="demo-container">
    <a href="#demo-modal">Open the js-less modal</a>
</div>

<div id="demo-modal" class="css-only-modal">
    <div class="modal-content">
        <h1>CSS Only Modal</h1>

        <p>By linking your A element/button to the ID for the modal contaner and using the :target pseudo-class, you can display/open a modal with no javascript whatsoever.</p>
        
        <p>This is a great option for ultra-lightweight, simple modal needs. As with everything, it may not be the best solution for all modal needs. The biggest caveat I see right now is that only the close icon/link will close the modal.</p>
        
        <a href="#" class="modal-close">&times;</a>
    </div>
</div>

style.scss

// Hide and show the modal
//------------------------
.css-only-modal {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    &:target {
        visibility: visible;
        opacity: 1;
    }
}

// Just makin' it all look nice
//-----------------------------
body {
    margin: 0;
    padding: 0;
    font: 100%/1.4 sans-serif;
    color: darken(rgba(55, 11, 105, 1), 10%);
}

.demo-container {
    // take up the full screen
    height: 100vh;

    // center yo-self
    display: flex;
    align-items: center;
    justify-content: center;

    // screen background
    background: linear-gradient(
        90deg,
        rgba(255, 140, 143, 1) 0%,
        rgba(168, 24, 141, 1) 51%,
        rgba(55, 11, 105, 1) 100%
    );

    a {
        color: darken(rgba(55, 11, 105, 1), 10%);
        font-weight: 400;
        font-size: 1.25em;
        display: block;
        text-decoration: none;
        padding: 1em 2em;
        background-color: white;
        border: 2px solid darken(rgba(55, 11, 105, 1), 10%);
        border-radius: 4px;

        &:hover {
            text-decoration: underline;
        }
    }
}

.css-only-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    transition: all 0.7s;
}

.modal-content {
    border-radius: 4px;
    position: relative;
    width: 500px;
    max-width: 90%;
    background: #fff;
    padding: 1em 2em;
}

.modal-close {
    color: darken(rgba(55, 11, 105, 1), 10%);
    font-size: 2em;
    position: absolute;
    top: 5px;
    right: 10px;
    text-decoration: none;
    line-height: 1;
}