MicroModal

INFO: Take a look at my microUI website template. It contains the newest version of MicroModal and lots of other nice goodies!

MicroModal can be used to display a modal window on click. Useful scenarios include: "Are you sure you want to ...?", "Please enter ...!", and so on.

This isn't one of those huge modal scripts with CSS files and fancy graphics - if you want it fancy, use (or wait for) CSS3. This solution is fat-free.

Screeshot

Demonstration
Check out the demonstration here.

Example
The JavaScript

$('.micromodal').microModal({
    autoPositioning: true, // set true if you wish to center the modal window (default: true)
    overlay: {
        show: true,        // set true if you wish to how an overlay (default: true)
        color: '#fff',     // set the colour of the overlay (default: '#fff')
        opacity: 0.8       // set the opacity of the overlay (default: 0.8)
    }
});

The Html

<button class="micromodal target-changecolor">Let's change the background colour!</button>
  
<div id="changecolor" class="dialog">
 Do you really want to do this?
 <br /><br />
 <button onclick="$.fn.microModal.dialogs['#changecolor'].close();">No way!</button>
 <button onclick="$('body').css('background-color', '#fedcba');$.fn.microModal.dialogs['#changecolor'].close();">Sure</button>
</div>

The Css - if you don't know what to do yourself - find another JQuery Plugin ;-)

Download
Source Code
Compressed Code (for use in productive environment)