web-dev-qa-db-ja.com

jQuery DialogとDatepickerプラグインの問題

ダイアログがあり、ダイアログに日付ピッカーフィールドがあります。

ダイアログを開いて日付ピッカーフィールドをクリックすると、日付ピッカーパネルがダイアログの後ろに表示されます。

Zindex、stack、bgiframeなどのプロパティを試しますが、成功しません。

誰か助けてくれますか？

Tks。

jqueryjquery-ui-dialog
54
Renato Bezerra

旧回答

z-index（ハイフンに注意してください！）は重要なプロパティです。必ずダイアログより大きく設定し、正しい要素に設定してください。方法は次のとおりです。

#ui-datepicker-div 
{
 z-index: 1000; /* must be > than popup editor (950) */
}

API変更-2010年4月17日

日付ピッカーのCSSファイルで、.ui-datepickerアイテムと変更：

.ui-datepicker { width: 17em; padding: .2em .2em 0; z-index: 9999 !important; }

z-index：9999！important;を使用すると、Firefox 3.5.9（Kubuntu）で機能しました。

79
Craig Stuntz

jquery-ui-1.8の場合

<style type="text/css">
    .ui-datepicker
    {
        z-index: 1003 !important; /* must be > than popup editor (1002) */
    }
</style>

Datepickerにはz-indexを1に設定するelement.styleがあるため、重要です。

17
Jonatan Littke

これは私のために働いた：

.ui-datepicker {
        z-index: 9999 !important;
    }
6
Harmeet Singh

「input」テキスト要素に次のスタイルを配置します：「position：relative; z-index：100000;」。

Datepicker divは入力からz-indexを取得しますが、これは位置が相対的な場合にのみ機能します。

この方法を使用すると、jQuery UIからJavaScriptを変更する必要がありません。

2
Ronye Vernaes

jquery-ui-1.7.2の場合

<style type="text/css">
    .ui-datepicker
    {
        z-index: 1003; /* must be > than popup editor (1002) */
    }
</style>
1
yasirmturk

私はそれを呼び出して動作させました

$("#ui-datepicker-div").css("z-index", "1003" );
1
Indra

これをページの上部に設定します。それはうまくいきます：

<style type="text/css">
.ui-datepicker {z-index:10100;}
</style>
1
Revathi

私はショックを受けました：

a）datepicker z-Indexを設定するためのプログラムによるソリューションについて言及している人はいませんb）jQuery DatePickerが要素にバインドするときにz-Indexを渡すオプションがありません。

最高のインデックスを計算するためにjsメソッドを使用しています。デフォルトではdivのみをチェックします。これらはz-index値を取得する可能性が高い要素であり、ページ上のすべての要素を解析するよりも明らかに速いためです。

/* Get the highest zindex for elements on the page
*/
function getHighestZIndex(element){
    var index_highest = 0;
    var index_current;
    if(element == undefined){
        element = 'div';
    }
    $(element).each(function(){
        index_current = parseInt($(this).css("z-index"), 10);
        if(index_current > index_highest) {
            index_highest = index_current;
        }
    });
    return index_highest;
}

Javapscriptを使用してdatepickerを要素、つまり$（ '＃some_element'）。datepicker（）にバインドする必要があるため、その時点でターゲット要素のスタイルを設定して、datepickerがz-indexを取得するようにします。 datepicker（）がターゲット要素のz-Indexを持ち、position：relative：に設定されている場合、それを指摘してくれたRonye Vernaes（このページの回答）に感謝します。

$(this.target).datepicker();
var zindex = e.getHighestZIndex();
zindex++;
$(this.target).css('position','relative');
$(this.target).css('z-index',zindex);

this.targetは、datepickerフィールドに作成する入力要素です。バインド時に、ページ上で最も高いz-indexを取得し、要素のz-indexを1つ高くします。日付ピッカーアイコンがクリックされると、Ronye Vernaesが述べたように、スタイルの位置：相対的なため、入力要素からそのz-indexを取得します。

このソリューションでは、最高のz-Index値がどうなるかを推測しようとしません。実際にGETします。

1
Zac Imboden

UIバージョン1.7.2の時点で、ui-datepicker-divは有効なcss要素ではなくなりました。 「ui-datepicker」は最も外側のラッパーのようであり、z-indexを99999に設定することは、私が知る限り正しく機能しています。

1
matt

Datepickerは、ポップアップz-indexを関連付けられたフィールドよりも1つ多く設定し、そのフィールド自体がポップアップダイアログにある場合でも、そのフィールドの前に保持します。デフォルトでは、z-indexは0であるため、datepickerは1になります。datepickerが正しく表示されない場合はありますか？ JQueryフォーラム投稿

Z-indexを100にするには、z-index:99;の入力が必要です。JQueryUIはdatepickerをz-index:100に更新します

<input style="z-index:99;">または<input class="high-z-index">およびcss .high-z-index { z-index: 99; }

また、ダイアログボックスから継承するz-indexを指定して、jQueryUIにz-indexを適切に検出させることもできます。

<input style="z-index:inherit;">または<input class="inhert-z-index">およびcss .inherit-z-index { z-index: inherit; }

0
Loren

ダイアログはiframeでレンダリングされ、他のすべて（ドロップダウンを含む）の上にレンダリングされます。一方、日付ピッカーは通常のHTMLでレンダリングされ、絶対に配置されます。

日付ピッカーは、iframeではなく親ページに対して絶対的にレンダリングされるようです。カレンダーをダイアログ内に配置するだけで、絶対的な位置にない標準的なブログとして試しましたか？または、代わりにドロップダウンを使用することもできます。

0
Mike Robinson

Jquery datepicker 1.8.3バージョンのソリューション、z-index値を変更するには、cssを使用して変更することは不可能ではありません。

これはうまく機能します：

jQuery('.ui-datepicker-trigger').click(function() {
        setTimeout(function() {
            jQuery('#ui-datepicker-div').css('z-index', 999);
        }, 500)
    });
0
ignas