jQuery simple dialog plugin; 1.5kB minified

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() {
        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() {
    }, 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:

, , , , , ,

  1. #1 by Del on April 4, 2011 - 12:29 am

    Finally, a truly lightweight dialog plugin – no worthless bloat included. Don’t get me wrong colorbox, lightbox etc have some really cool features and funky styles, i’m just looking for something simple.

    It’s awesome H, i already have a site in mind that i will be using this for.

    Nice one :)

    • #2 by Howard Yeend on April 4, 2011 - 12:33 am

      Thanks Del, really happy you’ll find it handy. I was just really surprised that certain other ‘lightweight’ dialogs were such beasts. I don’t want all that fancy stuff, just the bare minimum will do fine.

      I have a suspicion that most dialogs start off minimal and then little twinkly bits get added and added and added until you end up with 10kB and twelve files, localisation and an email client bundled with it ;)

  2. #3 by Kevin Jiang on February 8, 2012 - 4:12 am

    How to show two dialogs in one page??

    • #4 by Howard Yeend on February 8, 2012 - 2:32 pm

      you can just call liteDialog with different arguments to create different dialogs.

      If you want to show two at the same time…. I think that’s a bad idea from a UI perspective.

Comments are closed.