模态弹出窗口没有出现在Bootstrap3的叠加层顶部。如何解决这个问题

时间:2018-02-16 10:42:28

标签: css wordpress html5 twitter-bootstrap css3

在Bootstrap3中,我在我的网站上创建并自定义了Modal弹出窗口。这是工作。但不幸的是它出现在弹出式叠加层中。

点击按钮之前, enter image description here

点击按钮后, enter image description here

这种情况正在发生。所以我也调整Z-index。但这不是好处。我的代码如下:

.csk-landing-for-scl {
  letter-spacing: 0px;
  text-transform: none;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal-dialog {
  position: relative;
}

.modal-content {
  width: inherit;
  height: inherit;
  margin: 0 auto;
  background: none;
  border: none;
  position: relative;
}
<button type="button" data-toggle="modal" data-target="#exampleModalLong" class="btn csk-landing-for-scl">Request a quote</button>

<div class="modal fade" id="exampleModalLong">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      content...
    </div>
  </div>
</div>

这是我的代码。那我该怎么做呢?

1 个答案:

答案 0 :(得分:0)

是的,z-index是solution.please提供的z-index值比你的头z-index值更多。它肯定会被解决。