Question

假设我打开一个没有“id”的对话框，如何找到对话框并获取对话框对象，以便我可以对它执行.dialog（'close'）？

实施例

// say if this was my dialog
<div> 
   <input type="button" id="btn" />
</div>

$("#btn").parents("div").dialog('close');

这不起作用，所以我需要得到实际的对象。

Answer 1

我相信找到与div类最近的ui-dialog-content应该有效：

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

（.ui-dialog-content已应用于原始div，然后将其包含在其他一些div s中

以下是一个有效的例子：http://jsfiddle.net/HPkvZ/

Answer 2

这就是你应该在这些div上拥有id的原因。请考虑以下选项：

考虑将ID添加到标记中。这很容易做和维护。
否则，当您最初获得div时，在执行.dialog()之前，请为其提供动态ID：el.attr('id', 'dialogBox')。
如果您不想给它们ID（出于某种奇怪的原因），您仍然可以在js代码中的某个时间点使用它们，因此请保存对这些对象的引用。稍后，请参阅所需的参考，您可以致电.dialog('close')。这也将为您执行缓存，因此您无需再次搜索DOM树。
作为最后的手段，如果您不想执行上述操作，请按照原来的相同方式引用它们（这并不总是一个好主意，尤其是在DOM更改的情况下）。 / p>

虽然仅供参考，但您的示例（使用最后一个选项）有效：http://jsfiddle.net/vbcMW/

Answer 3

只需找到当前活动元素中最接近的父对象：

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

如果你有很多堆叠的对话框，这很有用。请注意jquery-ui的z-index is no longer used。

Answer 4

查找并关闭所有打开的jQueryUI对话框：

$（ “：UI-对话”）。对话框（ “关闭”）;

Answer 5

只需保存jQuery从.dialog调用返回的引用：

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

然后，您可以稍后使用该引用再次打开弹出窗口：

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

或完全删除（及其生成的.parent包装器）：

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

关闭后，您甚至可以将其删除，方法是使用close选项创建（或稍后添加）：

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

为什么不使用按钮选项？允许你通过$（this）.dialog（'close'）;

关闭

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

另外，有没有理由不给div一个id？无论如何，你必须以某种方式引用它来创建对话框。

如何获取jquery ui对话框对象？

6 个答案: