javascript - Bootstrap 模式对话框中的时间选择器

Question

我正在尝试在 boostrap 模态对话框中实现时间选择器。然而，当我打开对话框时，时间选择器仍然看起来像一个普通的文本字段，这让我相信这个 jquery 代码没有运行:

$('#timepicker1').timepicker();  // shown below

但是，我能够在普通网页上使用非常相似的代码来显示时间选择器。该问题似乎特定于在模态对话框中显示它。

这是我正在使用的时间选择器的链接:

http://jdewit.github.io/bootstrap-timepicker/

这是我的模态对话框:

<div class="modal fade" id="dialog" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">close</button>
                <h4 class="modal-title" id="myModalLabel">New Event</h4>
            </div>
            <div class="modal-body">
                <div class="input-append bootstrap-timepicker">
                    <input id="timepicker1" type="text" class="input-small">
                    <span class="add-on"><i class="icon-time"></i></span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

这是我用来初始化时间选择器的脚本

$( document ).ready(function() {
    //$('#table').editableTableWidget();

    $( "#btn-new-event" ).click(function() {
        $('#dialog').modal('show');
        $('#timepicker1').timepicker();  // not running properly
    });

});

如有任何帮助，我们将不胜感激!

Answer 1

对我来说，我必须这样做才能让它发挥作用:

.bootstrap-timepicker-widget.dropdown-menu {
    z-index: 99999!important;
}

当然，删除:

template: 'modal'