Jquery tarih seçici z-endeksi sorunu

Bir slayt gösterisi div var ve bu div'in üzerinde bir tarih seçici alanım var.

Tarih seçici alanına tıkladığımda, tarih seçici paneli slayt gösterisi div'in arkasında görünüyor.

Ve senaryoyu şu şekilde koydum:

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

Bu yüzden CSS'de tarih seçicinin z-endeksini değiştiremiyorum. Betiğin oluşturduğu tarih seçicinin z-endeksi 1 ve slayt gösterim div (googleajaxapi aracılığıyla da çağrılır) z-endeksi 5'tir. Bu yüzden, tarih seçicinin z-endeksini 5'ten büyük artırmam gerekiyor sanırım. arttırmanın bir yolu var mı?

Biri bana yardım edebilir mi?

'Giriş' metin öğesi aşağıdaki stil koyun: position: relative; z-index: 100000;.

Tarih seçici div, z-dizinini girdiden alır, ancak bu yalnızca konum göreli ise çalışır.

Bu şekilde, jQuery UI'den herhangi bir javascript'i değiştirmeniz gerekmez.

basitçe css kullanımınızda ' .ui-datepicker{ z-index: 9999 !important;}' Burada 9999, tarih seçicinizin kullanılmasını istediğiniz katman değeriyle değiştirilebilir. Herhangi bir kod yorumlanmamalı position:relative;ve girdi öğelerine ' ' css eklenmemelidir. Çünkü, giriş öğelerinin z-endeksinin artırılması, tüm giriş türü düğmeleri üzerinde etkili olacaktır ve bu, bazı durumlarda gerekli olmayabilir.

benim için çalıştı

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

Marksyzm cevabına dayanarak, bu benim için çalıştı:

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

Justin'in cevabına ek olarak, düzensiz işaretlemeden endişeleniyorsanız veya bu değerin CSS'de sabit kodlanmasını istemiyorsanız, girişi gösterilmeden önce ayarlayabilirsiniz. Bunun gibi bir şey:

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

Eğer ihmal edemez Not "position": "relative"eklenti ya görünüşleri hem kuralları veya stil sayfasında satır içi tarzında, ancak, kural değil hem .

Açılan dialog("widget")gerçek tarih seçici.

Bu sorunu tıklayarak çözdüm:

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

Tarih seçiciyi kullanan bir iletişim kutum var. Hep gizliydi. Z endeksini ayarladığımda, alt formdaki alan her zaman iletişim kutusunda görünüyordu.

Sorunu çözmek için gördüğüm çözümlerin bir kombinasyonunu kullandım.

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

Önceki gösteri, tarih seçicinin seçildiğinde her zaman en üstte olmasını sağlar, ancak onClose, alanın z-endeksinin daha sonra farklı bir tarih seçici ile açılan iletişim kutularında çakışmaması için sıfırlanmasını sağlar.

Buraya bakın: http://forum.jquery.com/topic/z-index-1-datepicker-1-8

Datepicker'ın datatables.net tabletools düğmesinin üstünde olduğu bir sayfam var. Veri tabloları düğmeleri, ayrı tarih seçici tarih düğmelerinden daha yüksek bir z-endeksine sahipti. Ronye'nin cevabı sayesinde bu sorunu pozisyonu kullanarak çözebildim: göreli; ve z-endeksi: 10000. Teşekkürler!

Bu, temayı kaçırdığımda başıma geldi. Temanın var olduğundan emin olun veya temayı yeniden yükleyin ve sunucunuza yeniden yükleyin.

Sorunumu çözen buydu:

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

Aslında css'nize etkili bir şekilde ekleyebilirsiniz, .ui-datepicker{ z-index: 9999 !important;}ancak değiştirebilir jquery-ui.cssveya jquery-ui.min.cssui-datepicker sınıfının sonuna ekleyebilirsiniz z-index: 9999 !important;. her ikisi de benim için çalışıyor (Sadece birine ihtiyacın var ;-))

Ben de bu sorunu yaşadım, tarih seçici girdinin z-endeksini kullandığından, aşağıdaki css'yi ekledim

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

Kendi giriş grubunu ve form kontrolünü kullanarak ebeveyn kimliği, sınıf veya benim durumumda bir önyükleme iletişim kutusu ile sizin için geçerli olan kuralı alın.

Yapmak zorundaydım

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