带有Z Index CSS的Bootstrap模态



我正在创建一个Web应用知道这是因为我需要设置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>

日期没有出现在我的模态函数Innappriateky

的模态和样式背后
<style>
    .modal{
        position:fixed;
        z-index:1;
}
    .calsen{
        position:absolute;
        z-index:100000;
}
</style>

模态背后的内容正在出现

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

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

textbox

<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>

我现在需要做什么?

尝试以下:

CSS:

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

我会使您的datepicker的z索引更高,而不是用模态z索引弄乱。(可能会破坏其他东西)

最新更新