Question

我在页面上打开了两个Bootstrap 4模态。第一个放在顶部，第二个放在底部。 Hovewer，关闭按钮仅适用于第二种模式，因为它很可能在打开时覆盖第一种模式。我怎样才能解决这个问题？它可以在不使用z-index的情况下完成吗？也许我编写html的方式有问题。

这是我的代码：

$('.modal').modal('show');

.top {
  background-color: black;
  color: #fff;
  text-align: center;
}
.close {
  opacity: 1;
  color: #fff;
}

.bottom {
  bottom: 0;
  position: fixed;
  width: 100%;
  text-align: center;
  background-color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-full modal" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false">
    <div class="top">
      <button type="button" class="close mr-1" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      TEXT GOES HERE
    </div>
</div>

<div class="container-full modal" id="modal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false">
    <div class="bottom">
      <button type="button" class="close mr-1" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      TEXT GOES HERE
    </div>
</div>

谢谢！

打开两个模态时，关闭按钮不起作用

0 个答案: