web-dev-qa-db-ja.com

JQuery日付ピッカーのZ-Indexの問題

スライドショーdivがあり、そのdivの上にdatepickerフィールドがあります。

日付ピッカーフィールドをクリックすると、日付ピッカーパネルがスライドショーdivの後ろに表示されます。

スクリプトを次のように配置しました。

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js

したがって、CSSのdatepickerのz-indexを変更することはできません。スクリプトが生成しているdatepickerのz-indexは1で、スライドショーdiv（googleajaxapi経由でも呼び出す）z-indexは5です。したがって、日付ピッカーのz-indexを5より大きくする必要があります。それを増やす方法はありますか？

誰か助けてくれますか？

jqueryjquery-pluginsuidatepicker
102
rubyist

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

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

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

170
Ronye Vernaes

cssで '.ui-datepicker{ z-index: 9999 !important;}'を使用するだけです。ここで、9999は、datepickerを使用可能にするレイヤー値に置き換えることができます。コードにコメントを付けたり、入力要素に 'position:relative;' cssを追加したりすることはできません。入力要素のz-indexを増やすと、すべての入力タイプのボタンに影響するため、場合によっては必要ない場合があります。

153
Aakash Sahai

私のために働いた

.hasDatepicker {
    position: relative;
    z-index: 9999;
}
16
Bashmakov Evgeniy

Marksyzm回答に基づいて、これは私のために働いた：

$('input').datepicker({
    beforeShow:function(input) {
        $(input).css({
            "position": "relative",
            "z-index": 999999
        });
    }
});
14
Lucas

ジャスティンの答えに加えて、乱雑なマークアップが心配な場合や、CSSでこの値をハードコーディングしたくない場合は、入力を表示する前に設定できます。このようなもの：

$('input').datepicker({
    beforeShow:function(input){
        $(input).dialog("widget").css({
            "position": "relative",
            "z-index": 20
        });
    }
});

プラグインは両方のルールまたはスタイルシートのインラインスタイルを検索しますが、両方ではないであるため、"position": "relative"ルールを省略することはできません。

dialog("widget")はポップアップする実際の日付ピッカーです。

4
marksyzm

日付ピッカーを使用するダイアログボックスがあります。それは常に隠されていました。 z-indexを調整すると、下部フォームのフィールドが常にダイアログに表示されました。

私が見た解決策の組み合わせを使用して、問題を解決しました。

$('.ui-datepicker', $form).datepicker({
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: "yy-M-dd",
                beforeShow: function (input) {
                    $(input).css({
                        "position": "relative",
                        "z-index": 999999
                    });
                },
                onClose: function () { $('.ui-datepicker').css({ 'z-index': 0  } ); }                    
            });

Before showは、選択されたときにdatepickerが常に一番上になるようにしますが、onCloseは、フィールドのz-indexがリセットされ、後で別のdatepickerで開かれたダイアログで重ならないようにします。

4
Harry Binnendyk

私はクリックで使用してこの問題を解決しました：

var checkin = $('.dpd1').datepicker()
.on('click', function (ev) {
        $('.datepicker').css("z-index", "999999999");
}).data('datepicker');
4
Waqleh

こちらをご覧ください： http://forum.jquery.com/topic/z-index-1-datepicker-1-8

2
Slawa

実際には、CSS .ui-datepicker{ z-index: 9999 !important;}を効果的に追加できますが、jquery-ui.cssまたはjquery-ui.min.cssを変更し、ui-datepickerクラスの最後にz-index: 9999 !important;を追加できます。両方のものが私のために働いています（あなたは1つだけが必要です;-)）

1
LeSage Stark

それが私の問題を解決したもの：

 $( document ).ready(function() {   
    $('#datepickerid').datepicker({
     zIndexOffset: 1040 #or any number you want
     });
});
1
limilou

これは、テーマを忘れていたときに私に起こりました。テーマが存在することを確認するか、テーマを再ダウンロードして、サーバーに再アップロードします。

1
user725913

Datetableがdatatables.net tabletoolsボタンの上にあるページがあります。データテーブルボタンには、個々の日付ピッカーの日付ボタンよりも高いz-indexがありました。 Ronyeの回答のおかげで、position：relative;を使用してこの問題を解決できました。およびz-index：10000。ありがとう！

1
TMNetworks

Datepickerは入力のz-indexを使用するため、この問題もありました。次のcssを追加しました。

#dialogID input,.modal-dialog input, .modal-dialog .input-group .form-control{
  z-index:inherit;
}

入力グループとフォーム制御を使用して、親ID、クラス、または私の場合はbootstrapダイアログのいずれかによって、自分に適用されるルールを採用します。

0
Jaynesify

そうしなければならなかった

.datepicker.dropdown-menu {
    position: relative;
    z-index: 9999 !important;
}
0
iMitwe