How can I get a jquery ui dialog object?

Say I have a dialog open that has no "id" how can I find the dialog and get the dialog ob开发者_StackOverflow社区ject so I can do .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 though so I need to get the actual object.

---

That's the very reason you should have an id on those divs. Consider the following options:

1. Consider adding the id to the markup. That is easy to do and maintain.

2. Otherwise, when you get the div(s) originally, before performing a .dialog(), give them dynamic id's: el.attr('id', 'dialogBox').

3. If you don't want to give them id's (for some strange reason), you still have them at some point in time in your js code, so save the references to those objects. Later on, refer to the required reference and you can call .dialog('close'). That will also perform caching for you, so you don't need to search the DOM tree again.

4. As a last resort, if you don't want to do the above, then refer to them the same way you did originally (this isn't always a good idea, especially if the DOM changes).

Although just for reference, your example (which employs the last option) works: http://jsfiddle.net/vbcMW/

---

I believe finding the closest div with class ui-dialog-content 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 a few other divs)

Here's a working example: http://jsfiddle.net/HPkvZ/

---

Just find the closest parent of the currently active element that is a dialog:

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

This is useful if you have lots of dialogs all stacked etc. Note that z-index is no longer used by jquery-ui.

---

Just save the reference that jQuery returns from the .dialog invocation:

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

You can then use that reference later to open the popup again:

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

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

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

You can even have it delete itself when it is closed, by creating it with the close option (or appending 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>

---

To find and close all open jQueryUI dialogs:

$(":ui-dialog").dialog("close");

---

why not use the buttons option? allowing you to close via $(this).dialog('close');

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

also, is there a reason to not just give the div an id? you have to reference it somehow to create the dialog anyway.