jquery-ui datepicker更改z-index

這個問題是非常直接的，雖然我很難找出如何解決它。jquery-ui datepicker更改z-index

我正在使用jQuery-ui datepicker以及自定義的「ios樣式開/關切換」。此切換使用一些絕對定位的元素，這些元素當前顯示在我的日期選擇器之上。

看到醜陋的圓形覆蓋低於7月6日...

enter image description here

骯髒的方式做到這一點（至少IMO）是寫一個風格在我的樣式表中的一個，但我當picker啓動完成這些工作時，應該使用一些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得到每個日期選擇器啓動時被覆蓋。

任何幫助表示讚賞！

來源

2012-07-18 Greg Guida

我認爲一個css！重要的規則在你的頁面的CSS比javascript更清潔，看作z-索引*是一個CSS屬性，用於樣式。如果我不得不做一個JS解決方案，它會在頭部添加一個'style'標籤 - 不僅讓它在CSS中保持你的JS代碼更短更乾淨，而且還可以無縫地應用於所有的datepickers實例。 – 2012-07-18 01:59:46

可能重複的http://stackoverflow.com/questions/715677/trouble-with-jquery-dialog-and-datepicker-plugins – Lance 2012-07-18 03:03:41

@Lance不是一個愚蠢的，因爲我問如何可以動態地做到這一點，而無需添加一行到css – 2012-07-18 04:35:37

114

問題中的JS代碼不起作用，因爲jQuery每次調用它時都會重置datepicker小部件的style屬性。

覆蓋style的z-index的簡單方法是使用!important CSS規則，如another answer中已提及的那樣。另一個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

我每次調用它時，都會創建一個延遲函數對象來設置窗口小部件的z-index，該窗口在被jQuery UI重置之後設置。它應該滿足您的需求。

CSS hack遠不那麼難看IMO，我只在jQuery UI調整（這正好在我的頁面上的IE6調整之上）中預留了一個CSS空間。

來源

2012-07-18 05:11:44

我可以告訴你，你有多搖滾！？首先嚐試了其他許多事情。謝謝！ – Bretticus 2013-03-22 20:27:02

感謝您的答案，它的工作原理，但只要日期選擇器刷新（例如你改變月份）z-index設置爲默認，所以我認爲這個答案需要一個小的調整，即添加以下 onChangeMonthYear：函數（）{ 的setTimeout（函數（）{ $（ 'UI-日期選擇器 '）的CSS（' z索引'，99999999999999）; }，0）; } – Gombo 2014-10-21 14:38:31

@Gombo我相信如果你使用其中一種CSS方法（如上面描述的JS方法）那樣更容易，因爲這些方法遠沒有那麼駭人聽聞。 ';'' – 2014-10-21 16:51:40

有一個更優雅的方式來做到這一點。添加這個CSS：

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

jQuery將設置日曆的z-index到101（比相應的元素多一個）。 position字段必須是absolute,relative或fixed。 jQuery的搜索的第一個元素的父，這是絕對/相對/固定的，並採取其z-index

來源

2013-07-18 15:25:55

這個工作完美，你是一個天才。 – 2013-08-30 15:35:28

謝謝！它非常幫助我！ – WhatsInAName 2013-12-17 04:16:21

+1 ..這是理想的解決方案 – bragboy 2014-02-05 20:25:55

該日期選擇器現在設置彈出z索引到一個超過其相關聯的字段，以保持它的前面即使該字段本身位於彈出對話框中。默認情況下，z-index是0，所以datepicker以1結束。有沒有這種情況下沒有正確顯示日期選擇器？ JQuery Forum Post

要得到100的z-index你需要輸入與z-index:99;和jQueryUI的將更新日期選擇器是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-13 19:54:46 Loren

您需要使用!important條款使用CSS來強制在線z-index值。

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

來源

2015-07-27 10:32:51

對不起，對我而言 - z-index是由jQuery設置的，它的優先級高於！重要 – 2016-12-07 07:25:43

@ DylanHamilton-Foster你確定嗎？您可以添加一些其他標記，即BackgroundColor，以查看樣式是否實際應用？ – 2016-12-07 12:26:25

這爲我工作，當我試圖結合使用日期選擇器與一個引導模式：

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

當然，改變選擇，以滿足您自己的需要。我將「z-index」設置爲1051，因爲引導程序模式的z-index設置爲1050.

來源

2016-07-06 18:34:55

最好的自然方法是將日期選擇器元素簡單地放在具有「相對「的位置，並具有比出現在你的控制之上的元素更高的」z-索引「...

來源

2017-07-01 20:06:15 clinton

請添加有意義的代碼，並描述更多你最好的自然方式 – Peter 2017-07-01 20:52:32

jquery-ui datepicker更改z-index

回答

相關問題