jquery-ui datepicker change z-index

Question

問題を解決する方法がわかりにくいですが、問題はかなりストレートです。

私はjQuery-uiのdatepickerとカスタムの "ios style on/off toggle"を使用しています。このトグルでは、現在日付ピッカーの上に表示されている、絶対配置された要素を使用します。

これを行うには汚い方法は、（少なくともIMO）私のスタイルシートの一つでスタイルを書くことですが、私は思います

...以下の7月6日をカバーする醜いサークルを参照してくださいこれを実現するためにピッカーが起動するときには、むしろjavascriptを使用してください。

私はすでに

$('.date_field').datepicker(); 
$('.date_field').datepicker("widget").css({"z-index":100}); 

と

$('.date_field').datepicker({ 
    beforeShow: function(input, inst) { 
     inst.dpDiv.css({"z-index":100}); 
    } 
}); 

を試みたが、z-indexが日付ピッカーが起動されるたびに上書きされますようです。

ご了承ください。

Answer 1

jQueryは、呼び出すたびにdatepickerウィジェットのstyle属性をリセットするため、問題のJSコードが機能しません。

styleのz-indexを簡単に無効にする方法は、既にanother answerに記載されている!important CSSルールを使用します。 answerは入力要素自体にposition: relative;とz-indexを設定し、自動的にDatepickerウィジェットにコピーされることを示しています。何らかの理由で、あなたが本当にあなたのページへのより多くの不要なコードや処理を追加し、それを動的に設定する必要がある場合

しかし、要求されたとして、あなたはこれを試すことができます。

$('.date_field').datepicker({ 
    //comment the beforeShow handler if you want to see the ugly overlay 
    beforeShow: function() { 
     setTimeout(function(){ 
      $('.ui-datepicker').css('z-index', 99999999999999); 
     }, 0); 
    } 
}); 

Fiddle

Iウィジェットのz-indexを設定するための遅延関数オブジェクトを作成しました.jQuery UIによってreset'edされた後、あなたが呼び出すたびに呼び出されます。それはあなたの必要性に十分でなければなりません。

CSSのハックは、IMOのはるかに醜いです。私は、CSSでjQuery UIの調整を行うスペースしか予約していません。

Answer 2

もっとエレガントな方法があります。このCSSを追加します。

.date_field {position: relative; z-index:100;} 

jQueryのカレンダーのz-index 101に（対応する要素より1）を設定します。 positionフィールドはabsolute,relativeまたはfixedである必要があります。 jQueryの相対/固定/絶対的である第一要素の親を検索し、日付ピッカーは現在の前にそれを維持するために、その関連するフィールドより1にポップアップZインデックスを設定し、そのz-index

Answer 3

を取りたとえそのフィールド自体がポップアップダイアログ内にあっても、そのフィールドは表示されません。デフォルトでは、Zインデックスは0なので、datepickerは1で終わります。これは、日付ピッカーが正しく表示されない場合がありますか？

JQuery Forum Postはz-index:100

<input style="z-index:99;">または<input class="high-z-index">とCSS .high-z-index { z-index: 99; }

あなたが指定することもできますが、z-index:99;で入力を必要とJQueryUIがする日付ピッカーを更新する100のzインデックスを取得するにはダイアログボックスから継承するz-indexを継承し、jQueryUIがz-indexを適切に検出するようにします。 .inherit-z-index { z-index: inherit; }

Answer 4

<input style="z-index:inherit;">または<input class="inhert-z-index">とCSSあなたはCSSを使用してのインラインz-index値を強制的に!important句を使用する必要があります。独自のニーズに合うようにセレクタを変更、もちろん

$('input[id^="txtDate"]').datepicker(); 
$('input[id^="txtDate"]').on('focus', function (e) { 
    e.preventDefault(); 
    $(this).datepicker('show'); 
    $(this).datepicker('widget').css('z-index', 1051); 
}); 

：私はブートストラップモーダルと一緒に日付ピッカーを使用しようとしていたとき

.ui-datepicker{z-index: 99 !important}; 

Answer 5

これは私のために働きました。ブートストラップモーダルのz-インデックスが1050に設定されているため、「z-index」を1051に設定しました。

Answer 6

ベストナチュラルの方法は、日付選択ツール要素を、あなたのコントロールの上に表示されている要素より高い "z-インデックス"を持っています...