lightest non-modal dialog with jQuery?

Question

Here is a demo:

http://jqueryui.com/demos/dialog/

But it's too huge for me.

There are 2 thousand lines included in all.

I'd like to have one in a single file with less than 1 thousand lines.

Answer 1

You can strip JQueryUI to its bare essentials by unchecking all of the things you don't need from the download when you get it at http://jqueryui.com/download.

I would imagine that you can get it below 1000 lines if you do this.

Answer 2

If you have an aversion to the complexity implied by a high line-count, you need to get over this or you'll end up doing voodoo, reimplementing from scratch for lack of trust, and choosing slightly-less-complex-looking but ultimately inferior libraries.

I say this because you ask for fewer lines of code, which is a good metric for complexity and maintainability, but a poor metric for important things like good design and good docs. Even size is seldom an issue, if you use minified code.

Take a deep breath and just include the file :)

Answer 3

Why do you want a smaller product? JQuery is considered to be one of the more lightweight JavaScript libraries out there. If JQuery is too big for you, you're going to have to be willing to give up some capabilities to get something significantly smaller.

Answer 4

@Shore: To implement this,

HTML code:

<a id="clickme">Open Dialog</a>

<div id="dialog" style="display:none;">Hello this is a dialog</div>

JS code:

$(document).ready(function(){
 // Default settings for dialog
 $("#dialog").dialog({
  bgiframe: true,
  height: 300,
  width: 350,
  autoOpen: false,
  modal: true,
  overlay: { 
   opacity: 0.7,
   background: "black"
  }
 });
   $('#clickme').click(function(){
   $("#dialog").dialog('open');
   }); 
});

Answer 5

I like jqmodal. (it's not necessarily modal!)
It's about 3k.

jqmodal link

Init

$('#dialog').jqm();

Show

$('#dialog').jqmShow();