How can I get the jquery ui dialog object?

Question

Say I have a dialog that does not have an "id", how can I find a dialog and get a dialog object so that I can make .dialog ('close') on it?

Example

// say if this was my dialog <div> <input type="button" id="btn" /> </div> $("#btn").parents("div").dialog('close'); 

This does not work, so I need to get the actual object.

Answer 1

That is why you must have an identifier for these divs. Consider the following options:

• Consider adding an identifier to the markup. It is easy to do and maintain.

• Otherwise, when you first get div (s), before executing .dialog() specify a dynamic identifier: el.attr('id', 'dialogBox') .

• If you do not want to specify their id (for some strange reason), you will still have them at some point in time in your js code to save links to these objects. Refer to the required link later and you can call .dialog('close') . This will also perform caching for you, so you no longer need to look for the DOM tree.

• As a last resort, if you do not want to do this above, refer to them the same way as before (this is not always a good idea, especially if the DOM changes).

Although for reference only, your example (which uses the latter option) works: http://jsfiddle.net/vbcMW/

Answer 2

I believe that finding the closest div with the ui-dialog-content class should work:

 $("#btn").click(function() { $(this).parents("div.ui-dialog-content").dialog("close"); }); 

( .ui-dialog-content is applied to the original div , which is then wrapped in several other div s)

Here is a working example: http://jsfiddle.net/HPkvZ/

Answer 3

Just find the closest parent of the current active element, which is the dialog:

 var dialog = $(document.activeElement).closest("div.ui-dialog-content"); 

This is useful if you have many dialogs with all elements, etc. Note that z-index is no longer used by jquery-ui.

Answer 4

To find and close all open jQueryUI dialogs:

$ (": u-dialog"). DIALOG ("close");

Answer 5

Just save the link that jQuery returns from the .dialog call:

var magic = $('<div>').html("Ta-da!").dialog();

You can then use this link later to open a popup :

$(magic).dialog('open');

or delete it completely (along with its generated .parent wrapper):

$(magic).parent().remove();

You can even delete it when it is closed by creating it using the close parameter (or adding it later):

close: function(ev, ui) { $(this).remove(); }

 var magic = null; function createMagic() { magic = $('<div>').html("Ta-da!").dialog({ modal: true, title: 'Not from the DOM', buttons:[{ click: function () { $(this).dialog("close"); }, text: 'Close Me' }], show: false, //close: function(ev, ui) { $(this).remove(); } }); updateMagicStatus(); } function showMagic() { $(magic).dialog('open'); updateMagicStatus(); } function killMagic() { $(magic).parent().remove(); updateMagicStatus(); } function updateMagicStatus() { $('#MagicStatus').text(magic); $('#MagicPopStatus').text($('div.ui-dialog').length); } $(document).ready(updateMagicStatus); 

 <link href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> <div style='cursor:pointer'> <a onclick="createMagic();">Make a Magic Modal</a> <br/><br/> <a onclick="showMagic();">Show the Magic Modal</a> <br/><br/> <a onclick="killMagic();">Kill the Magic Modal</a> </div> <br/> Magic object is currently: <label id="MagicStatus" style='color:red'></label> <br/> jQUery UI popup wrappers: <label id="MagicPopStatus" style='color:red'></label> 

Answer 6

why not use buttons? letting you close through $ (this) .dialog ('close');

http://jsfiddle.net/dwick/DqLct/2/

also, is there a reason to not just give the div id? you must somehow refer to it in order to create a dialogue.