为什么我的模态背景位于模态之上？

Question

下面您会发现模态的指定 z 索引高于模态背景的 z 索引的情况。尽管如此，在很多情况下背景都会位于模态之上。因此，用户无法访问模式。您可以在下面的图片和代码中找到示例。

让模态框始终位于背景之上的规则是什么？特别是，我正在寻找“容器”类的“位置”选项。我仅使用一个简单的容器简化了我的问题。实际上，该容器可能有不同的位置。我使用 jQuery 只是为了简化上下文。

下面您可以找到带有 4 个示例的 HTML，其中模态背景出现在模态“上方”。一个例子是：

“关闭”背景不是解决方案。

我阅读了这篇很棒的文章和这篇文章，但发现很难应用于应得的案例。我尝试了“堆栈上下文”并结合将模态 div 放置在容器 div 内部或外部。

$(document).ready(function() {
  $("#myBtn").click(function() {
    $("#myModal").modal({
      backdrop: true
    });
  });
});

.container {
  z-index: 85;
  /* Backdrop overrules: situation 1: container position: relative; && modal-div position: static with modal outside container-div */
  /* Backdrop overrules: situation 2: container position: absolute; && modal-div position: static with modal outside container-div */
  /* Backdrop overrules: situation 3: container position: relative; && modal position: no position with modal inside container-div */
  /* Backdrop overrules: situation 4: container position: absolute; && modal position: no position with modal inside container-div */
  position: absolute;
}

.modal {
  background-color: red;
  z-index: 100;
}

.modal-backdrop {
  background-color: green;
  z-index: 90;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <h2>Modal and backdrops</h2>
    <p>Simulate a backdrop that overrules a modal</p>
    <button type="button" class="btn btn-info btn-md" id="myBtn">Modal with Overlay</button>

    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal with Overlay</h4>
          </div>
          <div class="modal-body">
            <p>This modal has a overlay.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

更新：从模态中删除 z-index 确实是正确的。但这并不能解决当前的问题。

Answer 1

给出相对或绝对的位置，无论什么对你有用，到 .modal 类，那么 z-index 将在 modal 上工作

为什么我的模态背景位于模态之上？

问题描述投票：0回答：1

1个回答

最新问题

为什么我的模态背景位于模态之上？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1