web-dev-qa-db-ja.com

jquery UIダイアログで、モーダルダイアログを別のモーダルダイアログの上に置くことは可能ですか

Jquery UIダイアログを使用したモーダルダイアログがあります。ユーザーが最初のダイアログのフィールドを変更したときに、別のダイアログをポップアップしたい。どちらもモーダルでなければなりません。

私はこのコードをそこに入れてみましたが、何もポップアップしないように見えるので、これは可能ですか？次のコードは、通常のページ（IDの選択コントロール：selectDropdownThatICanChange）からクリックすると正常に機能しますが、変更している同じ選択コントロール自体がダイアログの場合、dialog（ "Open"）行は何もしません。 changeイベントが発生し、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>
jqueryjquery-uimodal-dialogjquery-ui-dialog
14
leora

UIダイアログはシングルトンではありませんダイアログはいくつでも開くことができます。そしてデフォルトではそれらはスタックされます。しかし、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');
        }
    }
});

最初のダイアログにドロップダウンを配置し、変更イベントで最初のダイアログの上に別のダイアログを開きました。

30
Zahid Riaz

任意の数のモーダルを開くことができ、デフォルトの動作は、それらが開かれた順序で積み重ねられます。

デモ：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
MLM

将来の発見者に知らせたかっただけです。 z-indexを使用してmodalWidgetを別のmodalWidgetの上に置くことができます。私はjquery ui 1.10.3を使用しています。

その方法は、ダイアログコンストラクターにダイアログクラスを与えることです。

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

次に、CSSで、最初のダイアログが使用しているよりも高いz-indexを指定します。

.ModalWindowDisplayMeOnTopPlease {
    z-index: 100;
}

インスタンス化されたz-indexを確認するために、firebugまたは開発ツールでどのツールを使用しているかを確認する必要がある場合があります。最初のモーダルウィジェットでは、デフォルトのz-indexは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>
2
phil

sushanth reddy がコメントに示されているように、ダイアログのz-indexを設定します。

$("#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
Royce Feng