How to Create Pure CSS Modal Window Effect

In this tutorial I’m going to show you how to create a pure css modal window effect. in one of my earlier tutorial I showed you how to create a pure css accordion and a pure css image lightbox. In these tutorials we used the :target css pseudo code which uses css IDs.

Today we’re going to use the same method to create modal window effects for text, images, videos and more.

[tutorial_details]

To start off, we’re going to create the modal window itself, which should look something like the following:

<div class="lightbox" id="text">
    <div class="box">
        <a class="close" href="#">X</a>
        <p class="title"><!-- Your Title Here --></p>
        <div class="content">
            <!-- Your content here -->
        </div>
    </div>
</div>

Where you place this, is up to you, I recommend putting it on the bottom of the page. This is invisible/hidden by default ( we’ll apply the CSS for it a bit later ). To call the modal window, you need a unique ID for it, this ID must be unique for each window on a page. You can use the same ID on different pages but you cannot have two windows with same ID on one page.

If you look at the HTML code above, we have the ID of “text”. We use this ID to call the window like the following:

<a href="#text">Text Modal Window</a>

Note that the anchor tag links to #link which is the same as the ID. This means that when this link is clicked, the mode window the id ID of “text” will popup. Of course we need to apply some CSS to make this all work.

The first thing we’re going to style is the box it self:

.lightbox .box {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
   	min-width:500px;
    margin: 2% auto;
    padding:20px;
    background-color:#FFF;
    box-shadow: 0px 1px 26px -3px #777777;
    }
    .lightbox .title {
        margin:0;
        padding:0 0 10px 0px;
        border-bottom:1px #ccc solid;
        font-size:22px;
        }
    .lightbox .content {
        display:block;
        padding:10px 0 0 0px;
        font-size:18px;
        line-height:22px;
        }
    .lightbox .close {
        float:right;
        display:block;
        text-decoration:none;
        font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size:22px;
        color:#858585;
        }

Then we’ll hide it so by default it’s hidden:

.lightbox {
    /** Hide the lightbox */
    display: none;
    /** Apply basic lightbox styling */
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color:#333333;
    }

And then when the link is clicked and ID is called we display id:

.lightbox:target {
    /** Show lightbox when it is target */
    display: block;
    outline: none;
}

And at this point your modal window should work.

In the content are you can put text, image, video, pretty much anything you want. Also, if you want to change the minimum width of the window, simple go to the .lightbox .box and look for min-width:500px; and change it. If you want to add a max width, then simple add max-width: <value>; below that.

If you enjoyed this tutorial, please make sure to follow me on Twitter so you won’t miss out on any future awesome tutorials!