Как я могу получить объект диалога jquery ui?

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 с)

Вот рабочий пример: http://jsfiddle.net/HPkvZ/

Answer 2

Просто найдите ближайшего родителя текущего активного элемента, который является диалоговым окном:

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

Это полезно, если у вас много диалогов, все они сложены и т. Д. Обратите внимание, что z-index больше не используется jquery-ui.

Answer 3

Это та самая причина, по которой вы должны иметь идентификатор в этих div.Рассмотрите следующие варианты:

1. Попробуйте добавить идентификатор в разметку.Это легко сделать и поддерживать.

2. В противном случае, когда вы получаете div (ы) первоначально, перед выполнением .dialog(), присвойте им динамические идентификаторы: el.attr('id', 'dialogBox').

3. Если вы не хотите давать им идентификаторы (по какой-то странной причине), они все еще есть в какой-то момент времени в вашем js-коде, поэтому сохраните ссылки на эти объекты.Позже, обратитесь к необходимой ссылке, и вы можете позвонить .dialog('close').Это также будет выполнять кэширование для вас, поэтому вам не нужно снова искать дерево DOM.

4. В качестве крайней меры, если вы не хотите делать вышеизложенное, тоотноситесь к ним так же, как вы это делали изначально (это не всегда хорошая идея, особенно если DOM меняется).

Хотя только для справки, ваш пример (который использует последнийопция) работает: http://jsfiddle.net/vbcMW/

Answer 4

Просто сохраните ссылку , которую 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 5

Чтобы найти и закрыть все открытые диалоговые окна jQueryUI:

$ ( ": щ-диалог"). Диалог ( "закрыть");

Answer 6

почему бы не использовать опцию кнопок? позволяет закрыть через $ (this) .dialog ('close');

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

также, есть ли причина не просто указывать идентификатор div? Вы все равно должны ссылаться на него, чтобы создать диалог.