引导程序模式对话框中的时间选择器

Question

我正在尝试在boostrap模式对话框中实现时间选择器。但是，当我打开对话框时，时间选择器仍然看起来像一个普通的文本字段，这使我相信此jquery代码未运行：

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

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

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

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

这是我的模态对话框：

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

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

$( 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'