Showing a modal dialog with jquery ui without an element?

Question

I'm making a small jquery application. I need some confirmation boxes to appear. However, I don't want to have to append an element to the body just so I can open up a dialog box. Is there a way to avoid this? To just call a dialog and pass arguments such as the title and text and options?

Answer 1

When you create a jQuery UI dialog box, current versions (1.8.*) automatically add the dialog to the body.

So if you do:

$('<div>').dialog({modal: true})

it just works. You should ensure that you call.remove() with the dialog is closed to remove the new element, though!

function myalert(title, text) {
    var div = $('<div>').html(text).dialog({
        title: title,
        modal: true,
        close: function() {
            $(this).dialog('destroy').remove();
        },
        buttons: [{
            text: "Ok",
            click: function() {
                $(this).dialog("close");
            }}]
    })
};

myalert("Test", "This is a test modal dialog");

See http://jsfiddle.net/alnitak/G3GRZ/ for full working demo.