How to create jQuery Dialog in function

Question

Does anyone know how to create a jQuery Dialog in a function? I can\'t find an attribute to set the message... In every example I found, the dialog has been statically written i

Answer 1

function createDialog(title, text, options) {
    return $("<div class='dialog' title='" + title + "'><p>" + text + "</p></div>")
    .dialog(options);
}

Answer 2

I used this with additionally jQuery tmpl plugin.

var confirmTemplate = jQuery.template("<div class='dialog' title='${title}'><p>${text}</p></div>");

   function showDialog(options) {
        if (options && options.data && options.dialog) {
            var dialogOptions = jQuery.extend({}, { modal: true, resizable: false, draggable: false }, options.dialog);
            return jQuery.tmpl(confirmTemplate, options.data).dialog(dialogOptions);
        }
    }

    function hideDialog (item) {
        if (!item.jQuery) item = $(item);
        item.dialog("close").dialog("destroy").remove();

}

usage:

showDialog({
             data: {
                      title: "My Title",
                      text: "my Text"
                   }
             dialog: {
                     myDialog: "options"
             }
           });

Answer 3

Here is a simple example:

function openDialog(message) {
    if ($('#dialog').length == 0) {
        $(document.body).append('<div id="dialog">'+message+'</div>');
    } else {
        $('#dialog').html(message);
    }
    $( "#dialog" ).dialog({
        autoOpen: false,
        show: "blind",
        hide: "explode"
    });
    $( "#dialog" ).dialog("open");
}