В диалоговом окне пользовательского интерфейса jquery можно установить модальный диалог поверх другого модального диалога

У меня есть модальный диалог, используя диалог jquery UI. Теперь я хочу всплывать в другом диалоговом окне, когда пользователь меняет поле в первом диалоговом окне. Оба должны быть модальными.

Возможно ли это, поскольку я пытался помещать этот код там, и ничего не появляется всплывающее окно. Следующий код отлично работает при нажатии с обычной страницы (где элемент управления select с id: selectDropdownThatICanChange), но если один и тот же элемент управления, который я меняю, сам является диалогом, линия диалога ( "Открыть" ) ничего не делает. Событие изменения срабатывает, и метод open вызывается, но ничего не появляется.

$("#secondModalDialog").dialog({
    resizable: false,
    height: 'auto',
    autoOpen: false,
    title: "Warning",
    width: 400,
    modal: true,
    buttons: {
        'Close': function () {
            $("#secondModalDialog").dialog('close');
        }
    }
});


$('#selectDropdownThatICanChange').live("change", function () {
    $("#secondModalDialog").dialog('open');
});

и вот диалог (который является просто div)

<div id="secondModalDialog" style="display:none">
      This is a test <br/> This is  atest
</div>

Ответ 1

Диалоги пользовательского интерфейса не являются одиночными. Вы можете открыть столько диалогов, сколько хотите. И по умолчанию они сложены. но когда Dialog сфокусировался, он появился в других диалоговых окнах.

вот скрипка, которую я создал для вас. Открыть диалог из первого диалога

// HTML:
<div id="dialog-modal" title="Basic modal dialog">
    Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.
    <select id="dialogSelect">
        <option>123</option>
         <option>234</option>       
    </select>
</div>
<div id="another-dialog-modal" title="2nd Modal :O">
    Second Modal yayyay
</div>

// JS:
$( "#dialog-modal" ).dialog({
    height: 300,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});
$("#dialogSelect").change(function(){
    $( "#another-dialog-modal" ).dialog('open');
});
$( "#another-dialog-modal" ).dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});

Я положил drop down на первый диалог и на событие изменения Я открыл другое диалоговое окно над первым диалогом.

Ответ 2

Вы можете открыть любое количество модалов, и поведение по умолчанию будет укладываться в том порядке, в котором они были открыты.

Демо: jsFiddle

$('#dialog-modal').dialog({
    height: 300,
    modal: true,
    buttons: {
        'Another Modal': function() {
            $('#another-dialog-modal').dialog('open');
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});

$('#another-dialog-modal').dialog({
    autoOpen: false,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});

Ответ 3

Просто хотел, чтобы будущие искатели знали. Можно использовать z-index, чтобы поместить modalWidget над другим. Я использую jquery ui 1.10.3.

Как вы это делаете, вы предоставляете вашему диалоговому конструктору класс диалога.

$("#secondModalDialog").dialog({
    title: 'Title',
    dialogClass: 'ModalWindowDisplayMeOnTopPlease',
    width: 200,
    height: 200
});

Затем в вашем CSS вы указываете более высокий индекс z, чем использует первый диалог.

.ModalWindowDisplayMeOnTopPlease {
    z-index: 100;
}

Вам может потребоваться проверить, какой из них он использует с firebug или некоторым инструментом dev, чтобы проверить, с каким индексом z он был установлен. Мой индекс z по умолчанию был 90 на первом модальном виджете. Код окна выглядел так:

<div id="firstModalDialog" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; max-height: none; height: 737px;">
<div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div>

Ответ 4

Как sushanth reddy, указанный в комментариях, установите z-индекс диалогового окна:

$("#secondModalDialog").dialog({
    resizable: false,
    height: 'auto',
    autoOpen: false,
    title: "Warning",
    width: 400,
    modal: true,
    zindex: 1001, // Default is 1000
    buttons: {
        'Close': function () {
            $("#secondModalDialog").dialog('close');
        }
    }
});

Ссылка: http://docs.jquery.com/UI/API/1.8/Dialog#option-zIndex