24186


jQueryUI DialogのAPIには、かつて`zIndex`オプションがありましたが、現在はありません。  
そこで、代替手段は無いのだろうかと調べた所、下記のページを見つけました。

<http://api.jqueryui.com/theming/stacking-elements/>

どうやら`ui-
front`クラスを介して`z-index`の制御ができるようなことを書いてあると思うのですが、私は英語が苦手であるため、いまいち内容を理解できません。  
このページでは、どのようなことが解説されているのでしょうか？


CC BY-SA 3.0
2016-04-18T04:18:03.297
24108
2019-12-13T18:00:49.073
8078
question
javascript jquery jquery-ui
jQueryUIのui-frontクラスの使い方


目的が不明ですので概要だけ。たとえばfirefoxならば開発ツールのインスペクタなどでみるとわかりますが、jquery-
uiでダイアログを作成すると、ダイアログの実体である以下のようなDOMがbody要素の一番最後に追加されます。

[code]

    <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable" ...>
        <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" ...>
        ...略...
        </div>
    </div>
    
[/code]

最後に追加されるということは、z-indexは特別な指定がなくとも内部的に最大ですから、どの要素よりも上にレンダリングされます。また、ダイアログを生成した順で重なってレンダリングされることでしょう。これが通常の動作で、ふつうはこれで十分です。

しかしajaxなどでさらにbodyの最後尾に追加された要素が描画される場合、内部的にz-
indexがダイアログよりも大きくなります。あるいは、明示的にCSSなどでz-indexが指定された要素があるばあい、その値がダイアログのz-
indexより大きければ、もちろんダイアログが隠れてしまいます。

こういった状況を考慮して、ダイアログがいかなる状況でも手前にくるためには、事実上到達不可能な大きなz-
indexを設定しておくことがひとつ挙げられ、これをするためのクラスとして`.ui-front`が用意されている、ということでしょう。

[code]

    .ui-front { z-index: 99999999; /* めちゃでかい値 */ }
    
[/code]

<http://jsfiddle.net/ht1foyo8/>  

[code]

    var d1 = $('#dialog1');
    var d2 = $('#dialog2');
    d1.dialog({
      autoOpen: false
    });
    d2.dialog({
      autoOpen: false
    });
    
    $('#open1').click(function() {
      d1.dialog('open');
    });
    $('#open2').click(function() {
      d2.dialog('open');
    });
[/code]

[code]

    #base {
      position: relative;
      z-index: 99999;
      background-color: rgba(0, 255, 211, 0.4);
    }
    
    //.ui-front { z-index: 100000; }
[/code]

[code]

    <script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script>
    <script type="text/javascript" src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="http://vitalets.github.io/x-editable/assets/x-editable/jqueryui-editable/js/jqueryui-editable.js"></script>
    <link rel="stylesheet" type="text/css" href="http://vitalets.github.io/x-editable/assets/x-editable/jqueryui-editable/css/jqueryui-editable.css">
    
    <button id="open1">open 1</button>
    <button id="open2">open 2</button>
    
    <div id="dialog1" title="dialog first">sample</div>
    <div id="dialog2" title="dialog second">example</div>
    
    <div id="base">
      this<br /> is
      <br /> base
      <br /> element
      <br /> test
      <br /> test
      <br /> test
      <br />
    </div>
[/code]

  
こちらにサンプルを用意してみました。最初は`.ui-
front`のCSSルールがコメントアウトされているので、ダイアログよりも上に要素が表示されますが、コメントを解除すればダイアログが上になるはずです。

> Note: When using ui-front, you must also set position to relative, absolute
> or fixed in order for the z-index to be applied.

注意としては、z-indexが有効となるために、対象要素の`position`CSSプロパティが`static`以外になっている必要がある、とありますが、少なくともdialogではabsoluteなので気にしないでいいでしょう。

以上、質問の趣旨に合っていない、あるいは私の理解がそもそも誤っていたら申し訳ありません。


CC BY-SA 4.0
2016-04-20T11:47:28.693
24186
2019-12-13T18:00:49.073
2019-12-13T18:00:49.073
32986
24108
answer