jQuery liteDialog is the unequivocally lightweight modal dialog plugin for jQuery. Its designed as an we dont care about the facilities we only wish to pop up the small message plugin.
Download the source upon github or Open the quick demo to see how it looks.
jQuery.liteDialog.js weighs in at 1.5kB minified, as well as requires only the single file. Its designed to be blindingly elementary to deploy as well as use, but additionally facilities the couple of basic options should we need them.By default, it only overlays the black shade over the total page as well as opens the dialog in the core of the screen with the html calm we specify. The dialog can be discharged by clicking anywhere or dire escape.
Basic liteDialog usage:
/* This is the many basic approach of attaching an event listener that fires the liteDialog */$('#normal').click(function() { $.liteDialog('This is the normal liteDialog.');});/* This e.g. sets some law options to showhow we can customise liteDialog to fit your needs. */$('#funky').click(function() { $.liteDialog({ html: "This liteDialog has the couple of law options set.", shadow: 'red', width: '200px', shadowRadius: '20px', background: '#00FFCC', color: 'blue', padding: 0, zIndex: 9000 });});/* This shows how to bucket calm in to liteDialog from an component upon the page */$('#element').click(function() { $.liteDialog({ html: $('#dialog').html() });});/* This shows how to bucket calm in to liteDialog via Ajax */$('#ajax').click(function() { $.get("./ajax_dialog.html", function(data, textStatus, jqXHR) { $.liteDialog({ html: data }); });});/* This e.g. specifies an choice that equates to the dialog cannot bedismissed solely by JavaScript */$('#modal').click(function() { $.liteDialog({ html: 'This liteDialog cannot be discharged solely by JavaScript\ - in this e.g. we\'ve the setTimeout to boot it after 4 seconds.' , modal:true} ); setTimeout(function() { $.liteDialog('hide'); }, 4000);});So thats it. A indeed lightweight jQuery elementary dialog plugin. Nothing fancy, only slap it in as well as get the pursuit done.
Why make use of liteDialog?
There are hundreds of elementary dialog jquery plugins, lightboxes as well as so on. But theyre all rather tasty the single billed itself as extremely lightweight but enclosed 3.4kB of minified JS, the 3kB image as well as the CSS file. Thats not unequivocally what we expect to find when we poke for the lightweight dialog plugin. So we spent the small time essay liteDialog with the bare smallest functionality.
If we wish the loading spinner while it precaches an image for we prior to resizing to the scold dimensions, demeanour elsewhere. If we only fundamentally wish the whim rapt box, liteDialog is for you.
Thanks to: Twist Digital Media for being overwhelming as well as permitting me to open source this plugin that was created in work-time. If we have the equine racing associated web project, if no-one else can help, as well as if we can find them, maybe we can sinecure the Twist team.
Update: There were the couple of comments upon reddit about this.
Related Posts:
This entrance was posted upon Apr 3, 2011, 10:45 am as well as is filed under javascript. You can follow any responses to this entrance by RSS 2.0.You can leave the response, or trackback from your own site.
