[解決済み] jquery-ui datepicker change z-index

質問

問題は簡単なのですが、どのように解けばいいのかわからず困っています。

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

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

これを行うための汚い方法（少なくとも私は）は、スタイルシートの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});
    }
});

のように表示されますが、datepickerが起動するたびにz-indexが上書きされるようです。

どんな助けでも感謝します!

どのように解決するのですか？

質問中のJSコードは、jQueryがリセットするため、動作しません。 style 属性をリセットするからです。

簡単にオーバーライドする方法として style 's z-index が付いているのは !important で既に述べたように、CSS ルールは もう一つの答え . さらに別の 答え を設定することを提案しています。 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);
    }
});

フィドル

遅延関数オブジェクトを作成して z-index を設定するための遅延関数オブジェクトを作成しました。これで十分でしょう。

CSSハックは、IMOでははるかに醜くありません。私は、CSSのスペースをjQuery UI調整のためだけに確保しています（私のページではIE6調整のすぐ上にあります）。