Problem mit jQuery Dialog und Datepicker Plugins

Question

Ich habe ein Dialogfeld, und ich habe ein Datepicker-Feld im Dialogfeld.

Wenn ich den Dialog öffne und in das Datumsauswahlfeld klicke, erscheint das Datumsfenster hinter dem Dialog.

Ich versuche mehr Eigenschaften: zindex, stack, bgiframe, aber nicht erfolgreich.

Jemand kann mir helfen?

Tks.

Answer 1

Alte Antwort

z-index (beachten Sie den Bindestrich!) Ist die Eigenschaft, die wichtig ist. Stellen Sie sicher, dass Sie ihn größer als den Dialog setzen, und stellen Sie sicher, dass Sie ihn auf das richtige Element setzen. Hier ist, wie wir es tun:

#ui-datepicker-div 
{ 
z-index: 1000; /* must be > than popup editor (950) */ 
} 

API Change - 17. April 2010

In der CSS-Datei für die Datumsauswahl, finden die .ui-datepicker Artikel und ändern Sie es:

.ui-datepicker { width: 17em; padding: .2em .2em 0; z-index: 9999 !important; } 

Mit Z-Index: 9999! Wichtig; arbeitete in Firefox 3.5.9 (Kubuntu).

Answer 2

Der Dialog wird in einem Iframe gerendert und über allem anderen gerendert (einschließlich Dropdown-Menüs). Inzwischen wird der Datepicker in normalem HTML gerendert und absolut positioniert.

Es klingt wie der Datepicker absolut relativ zu der übergeordneten Seite anstelle des iframe gerendert wird. Haben Sie versucht, den Kalender innerhalb des Dialogs als einen normalen, nicht absolut positionierten Blog zu platzieren? Oder Sie könnten stattdessen Dropdowns verwenden.

Answer 3

Ab der UI-Version 1.7.2 ist ui-datepicker-div kein gültiges css-Element mehr. „Ui-Datepicker“ scheint die äußerste Hülle zu sein und die Einstellung der Z-Index bis 99999 arbeitet für mich richtig, soweit ich weiß,

Answer 4

für jquery-ui-1.7.2

<style type="text/css"> 
    .ui-datepicker 
    { 
     z-index: 1003; /* must be > than popup editor (1002) */ 
    } 
</style> 

Answer 5

dieses Set oben auf deiner Seite. Es wird funktionieren:

<style type="text/css"> 
.ui-datepicker {z-index:10100;} 
</style> 

Answer 6

Ich habe es durch die Arbeit

Aufruf

$("#ui-datepicker-div").css("z-index", "1003"); 

Answer 7

für jquery-ui-1,8

<style type="text/css"> 
    .ui-datepicker 
    { 
     z-index: 1003 !important; /* must be > than popup editor (1002) */ 
    } 
</style> 

Wichtig benötigt wird, da die Datepicker eine element.style hat Das setzt den Z-Index auf 1.

Answer 8

Setzen Sie den folgenden Stil auf das Textelement 'input': "position: relative; z-index: 100000;".

Das datepicker div nimmt den Z-Index von der Eingabe, aber dies funktioniert nur, wenn die Position relativ ist.

Auf diese Weise müssen Sie kein JavaScript von jQuery UI ändern.

Answer 9

Lösung zu jquery dapepicker 1.8.3 version, um z-index-wert zu ändern, ist es nicht unmöglich, über css zu ändern.

Dies funktioniert gut:

jQuery('.ui-datepicker-trigger').click(function() { 
     setTimeout(function() { 
      jQuery('#ui-datepicker-div').css('z-index', 999); 
     }, 500) 
    }); 

Answer 10

Das ist für mich gearbeitet:

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

Answer 11

Ich bin schockiert, dass:

a) niemand hier eine programmatische Lösung Einstellung erwähnt der datepicker z-Index b) Es gibt keine Option für den jQuery DatePicker, um einen z-Index zu übergeben, wenn er an ein Element gebunden wird.

Ich verwende eine js-Methode, um den höchsten Index zu berechnen. Wir überprüfen standardmäßig nur divs, da dies die wahrscheinlichsten Elemente sind, um einen z-index-Wert zu erhalten und verständlicherweise schneller als jedes Element auf der Seite zu analysieren.

/* Get the highest zindex for elements on the page 
*/ 
function getHighestZIndex(element){ 
    var index_highest = 0; 
    var index_current; 
    if(element == undefined){ 
     element = 'div'; 
    } 
    $(element).each(function(){ 
     index_current = parseInt($(this).css("z-index"), 10); 
     if(index_current > index_highest) { 
      index_highest = index_current; 
     } 
    }); 
    return index_highest; 
} 

Weil wir Javascript verwenden haben die Datepicker auf ein Element zu binden, dh $ (‚# some_element‘). Picker(), zu dieser Zeit, dass wir das Zielelement Stil gesetzt, so dass picker abholt die Z-Index von ihm. Dank Ronye Vernaes (in seiner Antwort auf dieser Seite) für den Hinweis auf, dass Datepicker() wird das Zielelement des z-Index abholen, wenn sie eine hat und an Position: relative:

$(this.target).datepicker(); 
var zindex = e.getHighestZIndex(); 
zindex++; 
$(this.target).css('position','relative'); 
$(this.target).css('z-index',zindex); 

this.target ist das Eingabeelement, das wir zu einem Datumsauswahlfeld machen. Zum Zeitpunkt der Bindung erhalten wir den höchsten Z-Index auf der Seite und erhöhen den Z-Index des Elements um eins. Wenn das datepicker-Symbol angeklickt wird, wird der Z-Index vom Eingabeelement übernommen, weil, wie Ronye Vernaes erwähnte, der Stil position: relativ ist.

In dieser Lösung versuchen wir nicht zu raten, was der höchste z-Index-Wert sein wird. Wir bekommen es tatsächlich.

Answer 12

Der Datapicker setzt jetzt den Popup-Z-Index auf einen mehr als sein zugehöriges Feld, um es vor diesem Feld zu halten, auch wenn dieses Feld selbst in einem Popup-Dialog ist. Standardmäßig ist der Z-Index 0, sodass der Datumszeiger auf 1 steht. Gibt es einen Fall, in dem der Datumszeiger nicht korrekt angezeigt wird? JQuery Forum Post

Um einen Z-Index von 100. Sie benötigen einen Eingang mit z-index:99; und jQueryUI aktualisiert die Datepicker zu erhalten z-index:100

<input style="z-index:99;"> oder <input class="high-z-index"> und css .high-z-index { z-index: 99; }

Sie auch die angeben können sein Z-Index zu erben, der von Ihrem Dialogfeld erben sollte und jQueryUI den Z-Index ordnungsgemäß erkennen.

<input style="z-index:inherit;"> oder <input class="inhert-z-index"> und CSS .inherit-z-index { z-index: inherit; }