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

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

это возможно, поскольку я попытался поместить этот код туда,и ничего не появляется. Следующий код отлично работает при щелчке с обычной страницы (где элемент управления select с id: selectDropdownThatICanChange), но если тот же элемент управления select, который я изменяю, сам является диалоговым окном, строка диалога ("открыть") ничего не делает. Событие изменения срабатывает, и метод 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>
11
jquery jquery-ui jquery-ui-dialog modal-dialog

4 ответов

UI диалоги не являются одноэлементными вы можете открыть столько диалогов, сколько вы хотите. И по умолчанию они сложены. но когда диалог фокусируется, он появляется перед другими диалогами.

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

// 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');
        }
    }
});

Я поставил выпадающий список в первом диалоговом окне, и при изменении события я открыл другой диалог над первым диалогом.

29

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

демо: 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');
        }
    }
});
2

просто хотел, чтобы будущие искатели знают. Можно использовать z-индекс, чтобы поместить 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 на первом модальном виджете. Окно кода посмотрел smthg такой:

<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>
1

As sushanth Редди указанный в комментариях, установите 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

0