A modal box — or  “modal window” — is a custom dialog box that grays out the rest of the page when it’s active. it lets a site provide additional content without forcing the user to load a new page.

Clicking on a “Contact us” link might pop up up a modal containing the contact form, rather than taking the user to a separate page. The modal lets the user fill out the form, close the window, and resume browsing the page where they left off.

For example, the image below is what you’ll see if you hover over the “ShareThis” button at the bottom of this post.

On a recent project we needed a modal box that would work on all desktop browsers and mobile devices as well. We ran into two mutually-exclusive problems with existing solutions:

1. Modals that rely on javascript to position themselves don’t always play well with mobile devices. They use javascript to calculate their position in the viewport, and more often than not that means they center themselves in a viewport that is wider than the mobile-phone screen.
2. Many CSS-only modal boxes use CSS3 properties that are poorly supported on older browsers.

Rather than modify somebody else’s code, we came up with our own.  The result is a modal that uses javascript only for the show/hide work. Everything else is pure HTML/CSS. It works well on all devices and browsers, including older versions of IE.

Since it has no dynamic code, we dubbed it “dumb box.”

The basic HTML:

<div class="dumbBoxWrap">
    <div class="dumbBoxOverlay">
        &nbsp;
    </div>

    <div class="vertical-offset">
        <div class="dumbBox">
            Content goes here
        </div>
    </div>
</div>

The CSS:

.dumbBoxWrap { /* The div that shows/hides. */
    display:none; /* starts out hidden */
    z-index:40001; /* High z-index to ensure it appears above all content */
}

.dumbBoxOverlay { /* Shades out background when selector is active */
    position:fixed;
    width:100%;
    height:100%;
    background-color:black;
    opacity:.5; /* Sets opacity so it's partly transparent */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE transparency */
    filter:alpha(opacity=50); /* More IE transparency */
    z-index:40001;
}

.vertical-offset { /* Fixed position to provide the vertical offset */
    position:fixed;
    top:30%;
    width:100%;
    z-index:40002; /* ensures box appears above overlay */
}

.dumbBox { /* The actual box, centered in the fixed-position div */
    width:405px; /* Whatever width you want the box to be */
    position:relative;
    margin:0 auto;
    //Everything below is just visual styling */
    background-color:white;
    padding:10px;
    border:1px solid black;
}

The JavaScript:

You just need a simple script that changes “.dumbBoxWrap” to “display:block;” when the “open” link is clicked, and back to “display:none;” when “close” is clicked. In jQuery, it might look something like this:

<script type="text/javascript">
    $(document).ready(function() {
        //Show modal box
        $('#openModal').click(
            function() {$('.dumbboxWrap').show();}
        );
        //Hide modal box
        $('#closeModal').click(
            function() {$('.dumbboxWrap').hide();}
        );
    });
</script>

<a id="openModal">Open</a>

<a id="closeModal">Close</a>

How it works

When trying to center things in a browser window, we run up against two issues:

1. Divs with “position:fixed;” respond to the browser window, but cannot have automatic left-right margins.
2. Divs with “position:relative;” can have automatic left-right margins, but can’t do automatic vertical margins, and don’t pay attention to the browser window.

The Dumbbox solves that problem by combining a fixed-position div with a relative-position div to center an object in both dimensions.

.dumbBoxWrap is just a div that wraps around everything else so it can be easily shown/hidden all at once. It has a very high z-index to ensure it appears above all other content.

.dumbBoxOverlay is the background shading. By giving it “position:fixed;” and setting its width and height to “100%”, we ensure it fills the entire viewport. We then give it a background color and change its opacity to make it semi-transparent. You could accomplish the same effect by giving it a semi-transparent background image.

.vertical-offset positions the modal box vertically. It’s a fixed-position div with a width of “100%”, so it’s always as wide as the viewport. The vertical offset (“30%” in this case) lets it be more-or-less centered vertically. Adjust the percentage based on the depth of the box you’re using. It has a z-index that is slightly higher than .dumbBoxOverlay to ensure it appears above the overlay.

.dumbBox is the actual modal itself. It’s just a regular div with a fixed width and “margin:0 auto;”. That makes it center itself horizontally within .vertical-offset — and since .vertical-offset is always the full width of the viewport, that means .dumbBox is always perfectly centered in the viewport. The vertical positioning is already taken care of by .vertical-offset.

Adding a close icon

To close out, let’s add a jazzy lightbox-style close icon in the upper right corner of the modal.

First, create an icon. We’ll use the one on the left in this example. You can use it too, if you want. 

Then make it your close link:

    <a id="closeModal"><img src="PATH_TO_modal_close.png"/></a>

Alternatively, you could make it the link’s background image.

Put the <a> tag inside your modal content, and then give it some CSS to position it:

    #closeModal {
        position:absolute;
        top:-12px; /* Half the icon's height */
        right:-12px; /* half the icon's width */
        z-index:50;
    }

The center of the icon should now be centered on the upper right corner of the modal.