javascript - 带有 z-index CSS 的 Bootstrap 模式

Question

我正在创建一个网络应用程序，我想在其中从位于模态的文本框中选择日期，当我单击文本框时，日期( Material 设计)出现在模态后面，我知道这是因为我需要设置z-index

下面的例子是我自己试过的，但是没有成功

<style>
    .modal{
        position:relative;
        z-index:1;
}
    .calsen{
        position:absolute;
        z-index:1;
}
</style>

模态未打开

<style>
    .modal{
        position:absolute;
        z-index:1;
}
    .calsen{
        position:absolute;
        z-index:2;
}
</style>

出现模态后面的内容

<style>
    .modal{
        position:absolute;
        z-index:10000;
}
    .calsen{
        position:absolute;
        z-index:100000;
}
</style>

日期没有出现在我的模态函数 innappropriateky 的模态和样式后面

<style>
    .modal{
        position:fixed;
        z-index:1;
}
    .calsen{
        position:absolute;
        z-index:100000;
}
</style>

出现模态后面的内容

这就是我声明模态和文本框(在模态主体内)的方式

<div id="update" class="modal fade" role="dialog" >

文本框

<div class="form-clearify">
    <div class="row" style="margin-top:3px;">
        <div class="col-md-12 col-sm-12 col-xs-12" style="background-color:whitesmoke;">
            <label>Select Date </label>
            <md-datepicker class="calsen" ng-model="mddate" ng-change="dateformatechanged()" md-placeholder="Enter date"></md-datepicker>
        </div>
    </div>
</div>

我现在需要做什么？

Answer 1

试试这个:

CSS:

.md-datepicker-calendar-pane {
  z-index: 1200;
}