15

jqueryUIダイアログを使用したモーダルダイアログがあります。ユーザーが最初のダイアログのフィールドを変更したときに、別のダイアログをポップアップしたいと思います。どちらもモーダルである必要があります。

このコードをそこに置いてみましたが、何もポップアップしないようですので、これは可能ですか？次のコードは、通常のページ（idを持つselectコントロール：selectDropdownThatICanChange）からクリックすると正常に機能しますが、変更しているのと同じselectコントロール自体がダイアログである場合、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>
4

4 に答える 4

31

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

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

于 2012-10-09T05:07:07.313 に答える
3

モーダルはいくつでも開くことができ、デフォルトの動作は開いた順序でスタックされます。

デモ：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');
        }
    }
});
于 2012-10-09T02:12:33.957 に答える
3

将来の発見者に知らせたかっただけです。z-indexを使用して、modalWidgetを別のものの上に置くことができます。jqueryui1.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>
于 2015-04-28T02:05:48.683 に答える
0

コメントに示されているように、ダイアログの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

于 2012-10-03T20:03:23.610 に答える