6

Bootstrap の ClockPicker へのリンクは次のとおりです: http://www.jqueryrain.com/?B83aD_dg

それは完全に機能します。ただし、Bootstrap モーダル ポップアップでテキスト入力を入力するために使用しようとすると、モーダル ポップアップの背後に時計が表示されます。代わりにモーダル ポップアップ内 (または前) にクロック ピッカーを表示するにはどうすればよいですか?

何が起こるかのイメージは次のとおりです。

ここに画像の説明を入力

div の z-index を前に変更しようとしました。また、すべての要素の z-index を前にあるように変更しようとしましたclockpicker.css(例: z-index: 1120)。ただし、これは時計を非表示にするだけです。

<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">&times;</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>

4

4 に答える 4

11

あなたのコードでJSFiddleを作成しました。

問題は、モーダルの z-index が clock-modal の z-index よりも高いことです。

これを修正するには、CSS に次のコードを追加するだけです。

.clockpicker-popover {
    z-index: 999999;
}
于 2014-05-30T19:22:13.120 に答える