Popup modal open and close using html and css without any javascript

Popup modal open and close using html and css without any javascript

4 min. read

Checkout the below live demo

For this application, checkbox is used to open and close the popup modal. When checkbox is checked popup is visible, if it's not then the popup is hidden, all this is implemented using CSS ":checked" pseudo-class.

HTML markup

<div id="cover">
    <input type="checkbox" id="checkbox">
    <div id="label">Open the popup</div>
    <div id="modal">Love everybody !</div>
    <div id="yep">yep</div>
</div>

Concept

  1. Place the checkbox using absolute positioning above the label(div#label) element " covering its whole area ".

    Popup modal image 1

    CSS rules for this step

    #checkbox
    {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        margin: 0px;
        opacity: 0;
        cursor: pointer;
        z-index: 1;
    }
    
    #label
    {
        font-size: 20px;
        text-align: center;
        padding: 20px;
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 0px 20px 40px #1462a1;
    }

    Outer cover element(div#cover) for the popup needs to be relatively positioned so that checkbox and label elements can reside inside it perfectly.

    Now the checkbox is invisible and it is above the div#label element because of opacity: 0 and z-index: 1 CSS rules.

    When there is click on div#label element actually the checkbox is clicked and it gets checked.

  2. When the checkbox is checked make the popup modal(div#modal) visible and " position the checkbox exactly above the close button(div#yep) ".

    Popup modal image 2

    CSS rules for this step

    #modal 
    {
        right: 0px;
        left: 0px;
        max-width: 460px;
        font-size: 42px;
        padding: 25px;
        margin: 0 auto;
        margin-top: -32px;
        border: 10px solid #f5f5f5;
    }
    
    #yep
    {
        width: 53px;
        font-size: 20px;
        text-align: center;
        text-transform: uppercase;
        padding: 20px;
    }
    
    #modal, #yep
    {
        position: fixed;
        color: #2196f3;
        text-align:center;
        font-weight: bold;
        transform: scale(0);
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 0px 20px 40px #1462a1;
        transition: 0.2s cubic-bezier(0, 0.79, 0.52, 1.28) transform;
        z-index: 1;
    }
    
    #modal, #yep, #checkbox:checked
    {
        top: 114px;
    }
    
    #checkbox:checked ~ #modal, #checkbox:checked ~ #yep 
    {
        transform: scale(1);
        z-index: 2;
    }
    
    #checkbox:checked
    {
        position: fixed;
        left: auto;
        width: 93px;
        height: 64px;
        z-index: 3;
    }
    
    #yep, #checkbox:checked
    {
        right: 30px;
    }

    From above CSS rules it can be seen that when checkbox is checked it's dimension is made same as close button(div#yep) ie. close button(53px + 20px + 20px) = checkbox(93px) and it is positioned exactly above the close button.

    At this time checkbox is checked, when close button is clicked actually checkbox get unchecked as it is placed above close button using z-index: 3 CSS rule and all the effects of :checked CSS pseudo class become ineffective, " the popup becomes invisible along with the close button and checkbox returns to it's original position ie. above the div#label element ".

Complete HTML markup and CSS rules

HTML

<div id="cover">
    <input type="checkbox" id="checkbox">
    <div id="label">Open the popup</div>
    <div id="modal">Love everybody !</div>
    <div id="yep">yep</div>
</div>

CSS rules

*
{
    outline: none;
}

body
{
    padding: 110px 0;
    margin: 0px;
    font-family: Arial;
    background-color: #2196f3;
}

#cover
{
    width: 188px;
    margin: 0 auto;
    position: relative;
}

#checkbox
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: 0px;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

#label
{
    font-size: 20px;
    text-align: center;
    padding: 20px;
}

#label:after
{
    content: '';
    position: fixed;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
    background-color: #2196f3;
    z-index: 1;
}

#modal
{
    right: 0px;
    left: 0px;
    max-width: 460px;
    font-size: 42px;
    padding: 25px;
    margin: 0 auto;
    margin-top: -32px;
    border:10px solid #f5f5f5;
}

#yep
{
    width: 53px;
    font-size: 20px;
    text-align: center;
    text-transform: uppercase;
    padding: 20px;
    cursor: pointer;
}

#label, #modal, #yep
{
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0px 20px 40px #1462a1;
}

#modal,#yep
{
    position: fixed;
    color: #2196f3;
    text-align:center;
    font-weight: bold;
    transform: scale(0);
    transition:0.2s cubic-bezier(0, 0.79, 0.52, 1.28) transform;
    z-index: 1;
}

#checkbox:checked
{
    left: auto;
    width: 93px;
    height: 64px;
    z-index: 3;
}

#yep,#checkbox:checked
{
    position: fixed;
    right: 30px;
}

#modal,#yep,#checkbox:checked
{
    top: 114px;
}

#checkbox:checked + #label:after
{
    width: 100%;
    height: 100%;
}

#checkbox:checked ~ #modal,#checkbox:checked ~ #yep
{
    transform: scale(1);
    z-index: 2;
}
Write comments