web-dev-qa-db-ja.com

jQuery UI 1.10：ダイアログおよびzIndexオプション

画像がクリックされたときに表示されるダイアログを作成する必要があります。問題は、そこに本当に大きなz-index（たとえば500）があり、UIダイアログがその要素の後ろにあることです。

ここにページがあり、ログインする必要があります。ユーザー： "raducup"およびpass： "1"。もう1つの問題は、ダイアログで[閉じる]をクリックすると、オブジェクトが表示されなくなることです。

これは、画像がクリックされたときに呼び出す関数です。

function openItem(obiect){
    $( obiect ).css('zIndex',9999);
    $( obiect ).dialog({
        dialogClass: "no-close",
        modal: true,
        draggable: true,
        overlay: "background-color: red; opacity: 0.5",
        buttons: [
            {
                text: "OK",
                click: function() {
                    $( this ).dialog( "close" );
                }
            }
        ]
    });
    reparaZindex();
}
javascriptjqueryhtmlcssjquery-ui
46
raducup

あなたはそれを伝えませんが、jQuery UI 1.10を使用しています。

JQuery UI 1.10では、zIndexオプションが削除されました。

ZIndexオプションを削除

スタックオプションと同様に、適切なスタック実装ではzIndexオプションは不要です。 z-indexはCSSで定義され、フォーカスされたダイアログがその親の最後の「スタック」要素であることを確認することにより、スタックが制御されるようになりました。

ダイアログを「上部」に設定するには、純粋なcssを使用する必要があります。

.ui-dialog { z-index: 1000 !important ;}

要素のデフォルトのスタイルをオーバーライドするには、キー!importantが必要です。ダイアログにのみ設定する必要がある場合、dialogClassオプションを使用してスタイルを設定する必要がある場合、これはすべてのダイアログに影響します。

モーダルダイアログが必要な場合は、modal: trueオプションを設定します docs を参照してください。

Trueに設定すると、ダイアログはモーダル動作になります。ページ上の他のアイテムは無効になります。つまり、操作することはできません。モーダルダイアログは、ダイアログの下で、他のページ要素の上にオーバーレイを作成します。

使用するには、より高いz-indexでモーダルオーバーレイを設定する必要があります。

.ui-front { z-index: 1000 !important; }

この要素にも。

106
Irvin Dominin

JQueryダイアログメソッドを試してみてください。

$( ".selector" ).dialog( "moveToTop" );

参照： http://api.jqueryui.com/dialog/#method-moveToTop

8
Alain Gauthier

CSSに追加します。

 .ui-dialog { z-index: 1000 !important ;}
7
Rajiv007

ここには複数の提案がありますが、私が見る限り、jQuery UIの人たちは現在ダイアログコントロールを破っています。

これは、ページにダイアログを追加し、その半透明でモーダルブランキングdivが他の要素の背後にあるためです。それは正しくありません！

最後に、他のいくつかの投稿に基づいて、ダイアログウィジェットの拡張機能としてこのグローバルソリューションを開発しました。それは私には有効ですが、ダイアログ内からダイアログを開いた場合にどうなるかはわかりません。

基本的には、ページ上の他のすべてのzIndexを探し、.ui-widget-overlayを1つ上に移動し、ダイアログ自体を1つ上に移動します。

$.widget("ui.dialog", $.ui.dialog,
{
    open: function ()
    {
        var $dialog = $(this.element[0]);

        var maxZ = 0;
        $('*').each(function ()
        {
            var thisZ = $(this).css('zIndex');
            thisZ = (thisZ === 'auto' ? (Number(maxZ) + 1) : thisZ);
            if (thisZ > maxZ) maxZ = thisZ;
        });

        $(".ui-widget-overlay").css("zIndex", (maxZ + 1));
        $dialog.parent().css("zIndex", (maxZ + 2));

        return this._super();
    }
});

次のおかげで、これは私がこれを行う方法の情報を得た場所です： https://stackoverflow.com/a/20942857

http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/

2
Morvael

moveToTopが適切な方法です。

z-Indexが正しくありません。最初は動作しますが、z-indexで変更したダイアログの下に複数のダイアログが表示され続けます。ダメ。

0
Carlos Saenz

ダイアログを呼び出す前にこれを追加してください

$( obiect ).css('zIndex',9999);

そして削除

 zIndex: 700,

ダイアログから

0
Rohan Kumar

モーダル画面とダイアログの間にmy要素を挟むには、要素をモーダル画面の上に持ち上げてから、ダイアログを要素の上に持ち上げる必要があります。

要素$dlgにダイアログを作成した後、次の操作を行うことで、少し成功しました。

$dlg.closest('.ui-dialog').css('zIndex',adjustment);

各ダイアログには異なる開始z-index（増分的に大きくなる）があるため、次のようにadjustmentをブースト値を持つ文字列にします。

const adjustment = "+=99";

ただし、jQueryはモーダル画面のzIndex値を増加し続けるため、2番目のダイアログまでに、サンドイッチは機能しなくなりました。私はui-dialog "modal"をあきらめ、それを "false"にして、自分のmodalを作成しました。 jQueryUIを正確に模倣します。ここにあります：

CoverAll = {};
CoverAll.modalDiv = null;

CoverAll.modalCloak = function(zIndex) {
  var div = CoverAll.modalDiv;
  if(!CoverAll.modalDiv) {
    div = CoverAll.modalDiv = document.createElement('div');
    div.style.background = '#aaaaaa';
    div.style.opacity    = '0.3';
    div.style.position   = 'fixed';
    div.style.top        = '0';
    div.style.left       = '0';
    div.style.width      = '100%';
    div.style.height     = '100%';
  }
  if(!div.parentElement) {
    document.body.appendChild(div);
  }
  if(zIndex == null)
    zIndex = 100;
  div.style.zIndex  = zIndex;
  return div;
}

CoverAll.modalUncloak = function() {
  var div = CoverAll.modalDiv;
  if(div && div.parentElement) {
    document.body.removeChild(div);
  }
  return div;
}
0
IAM_AL_X