Ich habe ein Formular ( Payment.php ), das ich in einem modalen Bildschirm mit twitter Bootstrap anzeigen.
In dem Formular habe ich ein Datumsfeld, für das ich dieses Bootstrap-Plugin gefunden habe.
Aber das Problem ist, dass der Kalender in den Elternbildschirm geladen wird ( Index.php ) und nicht auf dem modalen Formular, wo es tatsächlich benötigt wird.
Kann jemand eine Lösung vorschlagen?
Nachfolgend ist der Code, den ich versucht habe.
Importe:
%Vor%PHP:
%Vor%JS:
%Vor%Fügen Sie der .datepicker-Klasse den Z-Index hinzu und erstellen Sie mehr als .modal
%Vor%Nach mehreren Tests kann ich meinen Kommentar zur Antwort von @ m4k noch einmal bestätigen: Die Z-Index-Lösung via CSS-Datei funktioniert bei Firefox 19 und 20 unter OS X nicht. Chrome funktioniert aber. Ich habe es nicht weiter auf anderen Browsern oder Betriebssystemen getestet.
Die Lösung, die für mich funktioniert, besteht darin, den Z-Index über die Datepicker-Konfiguration von jquery-ui wie folgt einzustellen:
%Vor%wobei der Z-Index höher sein sollte als der des Modales (im Bootstrap 2.3 hat das Modal 1050).
Eine noch weitergehende Lösung könnte darin bestehen, eine Methode in beforeShow aufzurufen, die den aktuell höchsten Z-Index auf der Seite automatisch ermittelt. Auf Ссылка finden Sie ein Beispiel.
Update: Setzen Sie den Z-Index 1 automatisch höher als das modale
Einfaches Beispiel, wie der Z-Index des zugrundeliegenden Modals bestimmt wird:
%Vor% Somit wird die Methode beforeShow
.. nichts davon funktionierte für mich. Ich benutze bootstrap 2.3.2, und egal wie ich es über Javascript versuche, bootstrap's javascript stellt den z-index des datepickers immer auf (in meinem Fall) 21 zurück. Sicher, es gibt einen Weg, es in Javascript zu tun, aber ich finde das CSS ziemlich sauber.
Also, das hat den Trick gemacht:
%Vor%Ich folgte dem beforeShow-Ansatz, musste aber das nächste Modal aus der Eingabe für die Z-Index-Berechnung abrufen und dann sicherstellen, dass der Z-Index für das separate div, das der Kalender ist, festgelegt wurde.
%Vor%Tags und Links javascript jquery php ajax twitter-bootstrap