Can anyone tell me about a jQuery modal dialog box library that doesn't suck

Question

jQuery based modal dialog boxes are great as long as you do as much as the example tells you to. I need a jQuery based modal dialog box library that has to have the following characteristics:

Ideal implementation:

   function showDialog(values)
    {
      processToChangeDom(values);
      changeDivTobeDisplayed();
      modalDialog.show();
    }

• It should be fast, something like the add and link dialog on StackOverflow. Most libraries take an eternity to load the dialog with its fancy effects and stuff.

• I want to call it using a script. Show a hidden div or a span element inline. MOst of the libraries talk filling an anchor with rel, class and href=#hiddenDiv sort of things. I need to be able to what I want without adding unnecessary attributes to my anchor. Something like this

• It should reflect changes I make to the DOM in the hidden Div. I used facebox and found out that it makes a copy of the hidden div and changes to the DOM doesn't reflect on the modal window.

• I need to be able call the close modal div using javascript and also attach beforeOpen and afterClose handlers to the action.

Does anyone have any suggestions? I have already tried facebox, simplemodal and a whole range of libraries, most of them don't support one or the other of these functions I described above.

Answer 1

Have you looked into jQuery UI? http://jqueryui.com/demos/dialog/

Answer 2

The jQuery UI dialog does pretty much all that you are asking. Also, I haven't noticed that it takes very much time to display. You don't even need to have the DOM element existing to use it. One nice thing about the UI widgets is that you only need to load those components that you need plus the core. They're also widely available via CDN networks, so it's possible that the user's client already has the JS downloaded for it.

 $(function() {
      $('<div title="I am a dialog"><p>Put whatever you want in here</p></div>')
           .dialog({
               autoOpen: true,
               modal: true,
               open: function(event,ui) { ... },
               close: function(event,ui) {
                         ...
                         $(this).dialog('destroy');
                      }
               draggable: false,
               resizable: false,
               ...
            })
  });

Answer 3

I've looked into quite a few modal boxes myself, and the best one I came up with is ThickBox. The jquery UI box was ok too, but I did not like the way it handles the back button.

Thickbox covers points 1-3 in your list of requirements. The even handlers could be easily added since the source code is not too complicated.

Answer 4

Try SimpleModal. I found it's API quite nice.

Answer 5

Try BlockUI. I've found it to be pretty good.

Answer 6

jquery-ui dialog I have found to be light weight and dynamic here an exmple of how you can use it in a funciton

  function display_alert(message,title) {
    title = title || "Alert";
      $('#alert').text(message); // the message that will display in the dialog

      $("#alert").dialog({
          autoOpen: false,
          bgiframe: true,
          modal: true,
        title:title,
        open: function() {
        },
        close: function (){
            $(document).unbind('keypress'); 
        },
          buttons: {
              OK: function() {
                  $(this).dialog('close');
              }
          }
      });
    $('#alert').dialog('option', 'title', title);
      $("#alert").dialog('open');
  }

Answer 7

ThickBox works pretty well, especially if you want to do things like videos or flash inside your modals.