Question

我正在使用此库https://www.npmjs.com/package/angularjs-datetime-picker来显示日期时间选择器，但由于某些原因，模态窗口无法正确显示。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Add new class</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <input type="text" date-format="yyyy-MM-dd HH:mm:ss" hour="09" minute='00' name="time" ng-model="clas.class_.time" datetime-picker  class="form-control input-lg" tabindex="3">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" ng-click="clas.create()" data-dismiss="modal">Create</button>
            </div>
        </div>
    </div>
</div>

任何人都知道这个问题吗？

click here to see the image

Answer 1

这看起来像是一个z索引问题。尝试将模态z-index设置为较低和/或在css中将datepicker的z-index设置得更高：

.modal{
   z-index: 200;
}
.datepicker{
   z-index: 999;
}

Answer 2

它＆＃39;一个CSS问题，默认情况下 bootstrap modal 有一个en=UTF-8。尝试向您的日期时间选择器添加更高的z-index: 1050;，如下所示：

z-index

日期时间选择器在模态窗口引导程序上无法正确显示

2 个答案: