84

問題を解決する方法を理解するのに苦労していますが、問題は非常に簡単です。

カスタムメイドの「iOSスタイルのオン/オフトグル」とともにjQuery-ui datepickerを使用しています。このトグルは、現在日付ピッカーの上に表示されているいくつかの絶対配置要素を使用しています。

下の7月6日を覆う醜い円を見てください...

ここに画像の説明を入力

これを行う汚い方法 (少なくとも imo) は、スタイルシートの 1 つにスタイルを記述することですが、ピッカーを起動してこれを実行するときに、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 が上書きされるようです。

どんな助けでも大歓迎です！

4

9 に答える 9

146

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

style'をオーバーライドする簡単な方法は、別の回答z-indexですでに述べたように、!importantCSSルールを使用することです。さらに別の答えは、Datepickerウィジェットに自動的にコピーされる入力要素自体の設定と設定を提案しています。position: relative;z-index

ただし、要求に応じて、何らかの理由で実際に動的に設定し、不要なコードを追加してページに処理する必要がある場合は、次のことを試すことができます。

$('.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);
    }
});

フィドル

z-indexウィジェットを呼び出すたびに、jQuery UIによってリセットされた後、ウィジェットのを設定するための遅延関数オブジェクトを作成しました。それはあなたのニーズで十分なはずです。

CSSハックははるかに醜いIMOではありません。CSSにjQueryUIの調整（ページのIE6の調整のすぐ上）専用のスペースを予約しています。

于 2012-07-18T05:11:44.493 に答える
96

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

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

jQuery はカレンダーz-indexを 101 (対応する要素よりも 1 つ多い) に設定します。positionフィールドは 、または である必要がabsoluteありrelativeますfixed。jQuery は、絶対/相対/固定である最初の要素の親を検索し、その「z-index

于 2013-07-18T15:25:55.783 に答える
21

!importantCSS を使用してインラインz-index値を強制するには、句を使用する必要があります。

.ui-datepicker{z-index: 99 !important};
于 2015-07-27T10:32:51.343 に答える
5

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

100 の z-index を取得するには。入力が必要であり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; }

于 2015-02-13T19:54:46.533 に答える
2

私の場合、何も機能しませんでした。日付ピッカーを持つ入力タイプに z-index を追加する必要がありました。

<input type="text" class="datepicker form-control" datatype="date" style="z-index: 10000;" id="txtModalDate">
于 2019-03-29T16:44:40.330 に答える