Question

我有一个我用一些CSS定制的bootstrap模式。现在当它被隐藏时，它覆盖了其他元素（这不允许我点击链接等）。可能会发生什么？我所看到的是，在模态div中它具有样式“display：block”，即使它被隐藏，也可以解释这个问题。同样从CSS中删除位置：绝对可以解决问题，但是当模态出现时，它没有正确定位。

HTML：

<div id="myModal" class="modal1 hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <article class="modalTopPart welcome-modal-top">
    <p>Hello!</p>
    </article>
  </div>
  <div class="modal-body">
    <div class="center">
    Hello again!
    </div>
  </div>
</div>

CSS：

.modal1 {
  position: absolute;
  top: 10%;
  left:50%;
  z-index: 111111;
  width: 800px;
  margin-left: -390px;
  background:rgba(0, 0, 0, 0.9);
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.3);
  *border: 1px solid #999;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  outline: none;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
          box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding-box;
          background-clip: padding-box;
}

Answer 1

尝试在CSS代码中添加z-index:。这可以控制您网页的“3D视图”。

想象一下，如果您要将页面的每个单独元素三维地放在彼此的顶部。例如，如果您有z-index:-10;，则该元素将从通常所在的位置放置10个空格。

.modal1 {
  z-index:-10;
  position: absolute;
  top: 10%;
  left:50%;
  width: 800px;
  margin-left: -390px;
  background:rgba(0, 0, 0, 0.9);
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.3);
  *border: 1px solid #999;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  outline: none;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
          box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding-box;
          background-clip: padding-box;
}

Answer 2

我做了那个把戏

#bootstrapModalFadeWindow
{
    margin-top:5000px;
}

然后它不会重叠任何东西。实际上它是在页面的边界。然后在js中，单击时删除此选项属性。它隐藏在形式隐藏之后。

.on("click","#buttotThatShowsModalWindow",function()
{
    $("#activateForm").css("margin-top","0px")
})

Bootstrap模态在隐藏时“覆盖”其他元素（2.3.2）

2 个答案: