puremango.co.uk

jQuery liteDialog is a very lightweight modal dialog plugin for jQuery. It’s designed as an “I don’t care about the features I just want to pop up a little message” plugin.

Download the source on github or Open a quick demo to see how it looks.

jQuery.liteDialog.js weighs in at 1.5kB minified, and requires just one file. It’s designed to be blindingly simple to deploy and use, but also features a few basic options should you need them.

By default, it just overlays a black shadow over the whole page and opens a dialog in the center of the screen with the html content you specify. The dialog can be dismissed by clicking anywhere or pressing escape.

Basic liteDialog usage:

/* This is the most basic way of attaching an event listener which fires a liteDialog */
$('#normal').click(function() {
    $.liteDialog('This is a normal liteDialog.');
});

/* This example sets some custom options to show
how you can customise liteDialog to fit your needs. */
$('#funky').click(function() {
    $.liteDialog({
        html: "This liteDialog has a few custom options set.",
        shadow: 'red',
        width: '200px',
        shadowRadius: '20px',
        background: '#00FFCC',
        color: 'blue',
        padding: 0,
        zIndex: 9000
    });
});

/* This shows how to load content into liteDialog from an element on the page */
$('#element').click(function() {
    $.liteDialog({ html: $('#dialog').html() });
});

/* This shows how to load content into liteDialog via Ajax */
$('#ajax').click(function() {
    $.get("./ajax_dialog.html", function(data, textStatus, jqXHR) {
        $.liteDialog({ html: data });
    });
});

/* This example specifies an option which means the dialog cannot be
dismissed except through JavaScript */
$('#modal').click(function() {
    $.liteDialog({ html: 'This liteDialog cannot be dismissed except through JavaScript\
                 - in this example we\'ve a setTimeout to dismiss it after 4 seconds.'
    , modal:true} );
    
    setTimeout(function() {
        $.liteDialog('hide');
    }, 4000);
});

So that’s it. A truly lightweight jQuery simple dialog plugin. Nothing fancy, just slap it in and get the job done.

Why use liteDialog?

There are hundreds of simple dialog jquery plugins, lightboxes and so on. But they’re all rather meaty – one billed itself as ‘extremely lightweight’ but included 3.4kB of minified JS, a 3kB image and a CSS file. That’s not really what I expect to find when I search for a lightweight dialog plugin. So I spent a little time writing liteDialog with the bare minimum functionality.

If you want a loading spinner while it precaches an image for you before resizing to the correct dimensions, look elsewhere. If you just basically want a fancy alert box, liteDialog is for you.

Thanks to: Twist Digital Media for being awesome and allowing me to open source this plugin which was written in work-time. If you have a horse racing related web project, if no-one else can help, and if you can find them, maybe you can hire the Twist team.

Update: There were a few comments on reddit about this.

---

Related Posts:

• Your contact form sucks
• What is the point of HTML 5?
• Complete list of #JS1k tweet-sized entries