CSS-only Modal Window dialogue

There was a time when we used to spend ages writing various Modal Window plugins in JavaScript. But with browser support for IE6-7 now pretty much dead and IE8 on its knees, it is time to explore different routes.

So I give you the demo first: http://jsfiddle.net/dimitar/fFzKg/

Several things that are special in this implementation that has no JavaScript whatsoever.

Disclaimer: broken on IE6-8, also broken on windows phone. Who cares, though…

Centering – using the absolute-center technique first ‘discoevered’ by Simon.

.absolute-center {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

This won’t work in IE older than IE9, BTW. Caveats include: the element that gets this className needs to have a known width AND height so dynamic height changes are not going to work – you need to use overflow hacks within the modal body to keep it from breaking.

To do the toggle, a small adjacent selector hack that is reliant on the order of elements and the :checked pseudo selector.

<style>
.modal {
    display: none;
}
input:checked + .modal {
    display: block;
}
</style>
...
<input type="checkbox" id="modal1" class="hide" autocomplete="off" />
<div class="absolute-center modal text-center">
    content here.
</div>

...
Press here to <label for="modal1">toggle modal</label>

That’s about it – the rest are simply sugary effects. There is also a blocker div that uses the same technique. Have fun and don’t use in production – unless you only care about modern browsers anyway.