How to create a dialog using jQuery UI without a <div> specified in the HTML code?

Question

Using jQuery UI to create a dialog is pretty easy:

<script>
$(function() {
    $( "#dialog" ).dialog();
});
</script>

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be   moved, resized and closed with the 'x' icon.</p>
</div>

But you still need a <div> in the HTML for this to work.

Is it possible to use purely jQuery (without a <div> in the HTML code) to create a dialog?

Justin Beckwith · Accepted Answer · 2011-09-02 16:31:42Z

20

While I'm not sure why you would want to open a dialog with no content, you could easily create a new one on the fly and invoke the jquery dialog against it:

$("<div>hello!</div>").dialog();

answered Sep 2, 2011 at 16:31

Justin Beckwith

7,8761 gold badge38 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

David Zhao Over a year ago

thanks for the quick reply, found the answer myself too :-) var $dialog = $('<div></div>') .html('This dialog will show every time!') .dialog({ autoOpen: false, title: 'Basic Dialog' });

David Zhao Over a year ago

how do I open a url in the dialog, btw, just getting greedy here :-)

Justin Beckwith Over a year ago

You use the load() jquery method: $("<div>hello!</div>").load(url).dialog();

Justin Beckwith Over a year ago

Also, fancybox has some pretty nice first class support for that as well: fancybox.net (my personal favorite)

David Zhao Over a year ago

thanks, but .load(url).dialog() refreshes the main page as well, and giving me error: Error: Attempt to run compile-and-go script on a cleared scope

|

Mike Pone · Accepted Answer · 2014-01-02 19:36:34Z

basic code

var d = $("#someId");
if (d.length < 1)
    d = $("<div/>").attr("id", "someId")
                   .appendTo("body");
else
    d.dialog('destroy');
d.html('some message')
 .dialog({ some_options })
 .dialog("open");

and you can probably put rap this in an extension method.

Update (my full code listing)

(function($) {
    $.extend({
        showPageDialog: function (title, content, buttons, options) {
            /// <summary>Utility to show a dialog on the page. buttons and options are optional.</summary>
            /// <param name="buttons" type="Object">Dialog buttons. Optional, defaults to single OK button.</param>
            /// <param name="options" type="Object">Additional jQuery dialog options. Optional.</param>
            if (!buttons)
                buttons = { "Ok": function () { $(this).dialog("close"); } };
            var defOptions = {
                autoOpen: false,
                modal: true,
                //show: "blind",
                //hide: "explode",
                title: title,
                buttons: buttons
            };
            if (options)
                defOptions = $.extend(defOptions, options);
            var pd = $("#pageDialog");
            if (pd.length < 1)
                pd = $("<div/>").attr("id", "pageDialog")
                                .appendTo("body");
            else
                pd.dialog('destroy');
            pd.html(content)
              .dialog(defOptions)
              .dialog("open");
        }
    }//end of function show...
  )//end of extend Argument
})(jQuery)

Sample Usage

$.showPageDialog(title, message, {
                "Yes": function () {
                    $(this).dialog("close");
                    // do something for 'yes'
                },
                "No": function () {
                    // do something for no
                }
        }

steve · Accepted Answer · 2011-09-02 16:29:59Z

2

var div = document.createElement('div');
div.innerHTML = "Hello World";
$(div).dialog();

answered Sep 2, 2011 at 16:29

steve

1,8542 gold badges21 silver badges30 bronze badges

Comments

karo · Accepted Answer · 2014-01-02 20:49:23Z

Juan Ayalas solution should work for modal Dialogs. For a non modal dialog it would be better to track the id inside the function. I use the following code which is not perfect but should work to ensure that the id is unique. The code is nearly equal to Juan Ayalas example but uses a counter to avoid a duplicate id. (Furthermore I deleted the OK-Button as default).

  (function($) 
  {
    var dCounter=0; //local but "static" var 
    $.extend({
    showPageDialog: function (title, content, buttons, options) {
        /// <summary>Utility to show a dialog on the page. buttons and options are optional.</summary>
        /// <param name="buttons" type="Object">Dialog buttons. Optional, defaults to nothing (single OK button).</param>
        /// <param name="options" type="Object">Additional jQuery dialog options. Optional.</param>
        if (!buttons)
            buttons = {}; //{ "Ok": function () { $(this).dialog("close"); } };
        var defOptions = {
            autoOpen: false,
            width: "auto",  
            modal: false,   
            //show: "blind",
            //hide: "explode",
            title: title,
            buttons: buttons
        };
        if (options)
            defOptions = $.extend(defOptions, options);
        dCounter++;
        //console.log("dCounter is " + dCounter);
        var pdId = "#pageDialog"+dCounter;          
        var pd = $(pdId);
        if (pd.length < 1)
            pd = $("<div/>").attr("id", pdId)        
                            .appendTo("body");
        else
            pd.dialog('destroy');

        pd.html(content)
          .dialog(defOptions)
          .dialog("open");   
    }//end of function showPageDialog
  }//end of extend options
  )//end of extend argument
  }//end of function definition

Collectives™ on Stack Overflow

How to create a dialog using jQuery UI without a <div> specified in the HTML code?

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related