20990


jQueryUIのDialogを使って、親画面から子ダイアログ、子ダイアログから孫ダイアログ、という開き方をします。  
`modal: true`オプション付きです。

孫ダイアログを開いた場合、子ダイアログは孫ダイアログのオーバーレイ(`.ui-widget-
overlay`)に隠れて欲しいのですが、どのように制御すれば良いでしょうか？

自分で調べてみたところ、`zIndex`オプションや`stack`オプションを使う方法が見つかりましたが、どちらも`1.10`で削除されてしまっています（`1.11`を使ってます）。

今から開くダイアログの`.ui-widget-
overlay`が特定できれば、自分で`$(...).css('z-index',...)`として書き換えてしまえるのですが、複数のダイアログが開いている（`.ui-
widget-overlay`が複数ある）場合、特定する方法が分かりません。

何か良い方法は無いでしょうか？


CC BY-SA 3.0
2016-01-13T09:19:32.437
20882
2016-01-17T05:18:07.677
2016-01-14T01:27:19.180
8078
8078
question
javascript jquery-ui
jQueryUI Dialogを複数開いた場合のz-indexの制御


最後に開いたオーバーレイは`$(".ui-widget-overlay").last()`で取得できそうです。

ただ子ダイアログは自動的に孫ダイアログの後ろに隠れているようです。

下のスニペットでは、ダイアログ内のボタンをクリックすると子ダイアログ開きます。  
ダイアログを開いている状態でオーバーレイ（ダイアログの外側）をクリックすると、

  * クリックしたオーバーレイの`z-index`

と、

  * `$(".ui-widget-overlay").last()`で取得したオーバーレイの`z-index`

がアラートで表示されます。同じ値になることが解ると思います。

[code]

    $("#dialog1").dialog({
      "modal": true,
      "buttons": [
        {
          "text": "OPEN CHILD DIALOG",
          "click": function() {
            $("#dialog2").dialog("open");
          }
        }
      ],
      "open": function() {
        onMyDialogOpen();
      }
    });
    
    $("#dialog2").dialog({
      "modal": true,
      "autoOpen": false,
      "buttons": [
        {
          "text": "OPEN CHILD DIALOG",
          "click": function() {
            $("#dialog3").dialog("open");
          }
        }
      ],
      "open": function() {
        onMyDialogOpen();
      }
    });
    
    $("#dialog3").dialog({
      "modal": true,
      "autoOpen": false,
      "open": function() {
        onMyDialogOpen();
      }
    });
    
    $("#open1").on("click", function() {
      $("#dialog1").dialog("open");
    });
    
    $("#open2").on("click", function() {
      $("#dialog2").dialog("open");
    });
    
    $("#open3").on("click", function() {
      $("#dialog3").dialog("open");
    });
    
    function onMyDialogOpen() {
      $(".ui-widget-overlay").on("click", function() {
        alert("z-index:clicked: " + $(this).css("z-index"));
        alert("z-index:current: " + $(".ui-widget-overlay").last().css("z-index"));
      });
    };
[/code]

[code]

    @import "//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css";
[/code]

[code]

    <div id="dialog1" title="Dialog 1">Dialog 1</div>
    
    <div id="dialog2" title="Dialog 2">Dialog 2</div>
    
    <div id="dialog3" title="Dialog 3">Dialog 3</div>
    
    <p>
      <button id="open1">Dialog 1</button>
    </p>
    
    <p>
      <button id="open2">Dialog 2</button>
    </p>
    
    <p>
      <button id="open2">Dialog 3</button>
    </p>
    
    <script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
[/code]


CC BY-SA 3.0
2016-01-17T05:18:07.677
20990
2016-01-17T05:18:07.677
13493
20882
answer