Question

My Bootstrap模式对话框显示在页面的全屏背景图像下方。我的这个背景图片的CSS类是：

.fullscreen_bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url('http://cleancanvas.herokuapp.com/img/backgrounds/color-splash.jpg');
  background-repeat:repeat;
}

My Bootstrap模式对话框和全屏背景图像一起显示为：

<body>
<div id="fullscreen_bg" class="fullscreen_bg"/>

<div class="modal fade" id="error_modal" tabindex="1" role="dialog" aria-labelledby="error_modal" 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">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Login error</h4>
            </div>
            <div class="modal-body">
                <h4></h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
  </div>
</div>
</body>

我尝试更改对话框和背景图片的z-index但没有成功。默认情况下，模态对话框的z-index似乎设置为1040。我认为这足够高，使它看起来就在顶部。那么，如何让引导对话框出现在页面的最顶层？

模态对话框z-index

0 个答案: