CSS Modal

A simple way to implement modal with CSS

by rulokc

HTML

<div class="container">
    <h1>CSS Modal</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci non quam corrupti tenetur accusantium laudantium sint dolorum commodi rem officiis dicta cupiditate quae provident sit maiores! Asperiores blanditiis fugiat eveniet!</p>
</div>

<input type="checkbox" id="checkbox-close"/>
<div class="modal">
    <div class="content">
        <h1>Hola</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.?
        </p>
        <div class="buttons">
            <a href="#" class="button ok">OK</a>
            
            <label for="checkbox-close">
                <span class="button close">Close</span>
            </label>
        </div>
    </div>
</div>

CSS

.modal {
    background: rgba(0,0,0,0.2);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.modal .content {
    width: 300px;
    height: 150px;
    background-color: #fff;
    border: 2px solid #f80;
    border-radius: 20px;
    padding: 10px;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
}
.modal h1 {
    margin: 0;
    text-align: center;
}
.modal .buttons {
    text-align: center;
}
.modal .button {
    display: inline-block;
    padding: 10px;
    border-radius: 4px;
    color: #ddd;
    background-color: #aaa;
    text-align: center;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
}
.modal .button:hover {
    color: #fff;
    background-color: #bbb;
}
.modal .button.ok {
    background-color: #0a0;
}
.modal .button.ok:hover {
    background-color: #0c0;
}
#checkbox-close {
    display: none;
}
#checkbox-close:checked ~ .modal {
    display: none;
}