Wie man ClockPicker für Bootstrap (Plugin) angezeigt werden in einem Bootstrap-Modal-pop-up-form?
Hier ist der link zu ClockPicker für Bootstrap: http://www.jqueryrain.com/?B83aD_dg
Funktioniert tadellos; jedoch, wenn ich versuche, es zu benutzen, füllen Sie in eine text-Eingabe in ein Bootstrap modal-pop-up, die Uhr wird hinter der modal-pop-up. Wie kann ich die Uhr auswählen, erscheinen in (oder vor) der modal-pop-up statt?
Hier ist ein Bild von dem, was passiert:
Ich habe versucht, die änderung der z-index des div-werden vor; ich habe auch versucht, die änderung der z-index eines jeden Elements in clockpicker.css
vor (Beispiel: z-index: 1120). Aber all dies bedeutet ist, macht die Uhr zu verschwinden.
<div class="modal fade appointment-modal"
id="appointment-modal"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog tutors-modal">
<div class="modal-content tutors-modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Appointment Scheduler</h4>
</div>
<div class="modal-body" style="height: 575px; left: 2.5%;">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="alert alert-danger"><span class="glyphicon glyphicon-alert"></span>
<form role="form" action="/portal/make-appointment/" method="post" id="appointment_form" class="form-horizontal">
<div class="col-lg-6">
<div class="input-group clockpicker" id = "clockpicker" style="padding: 6px; padding-bottom: 20px;">
<input type="text" class="form-control" id = "time" name="time" value="08:00">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
<script type="text/javascript">
var input = $('#time');
input.clockpicker({
autoclose: true
});
</script>
<input type="submit" name="submit" id="submit" value="Schedule Appointment" class="btn btn-info pull-right">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
- zeigen Sie uns den code
- Editiert meinen Beitrag, es hat nun den code, den ich verwende. clockpicker.js und clockpicker.css werden geladen .html-Seite, auch. Ich habe auch einen screenshot von dem, was passiert.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Machte ich einen JSFiddle mit Ihrem code.
Als ich vermutete, das problem ist, dass der z-index der modal höher ist als der z-index-die-Uhr-modal.
Alles, was Sie zu tun haben, um dieses Problem zu beheben ist, fügen Sie diese in Ihrer CSS:
fügen Sie einfach diesen Stil zu Ihrem clockpicker