从模态、背景 z-index 中打开模态答案

【问题标题】：Opening modal from within a modal, backdrop z-index从模态、背景 z-index 中打开模态
【发布时间】：2017-04-30 15:13:15
【问题描述】：

我需要能够在另一个模态中打开一个模态（而第一个模态保持打开状态）。这是一个例子：

http://jsfiddle.net/k2coz893/2/

当您打开第二个模态时，您会注意到第二个模态的背景/背景并没有覆盖第一个模态（即当第二个模态打开时仍然可以清楚地看到第一个模态）。这似乎是因为第二个模态的背景z-index 与另一个相同，因此第一个模态仍然可见。

如何防止这种情况发生？如何让第二个模态的背景覆盖第一个模态？

HTML：

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch first modal
</button>

<div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">first</h4>
      </div>
      <div class="modal-body">
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
  Launch second modal
</button>
<p>
Something
</p><p>
Something
</p><p>
Something
</p><p>
Something
</p><p>
Something
</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">second</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

【问题讨论】：

第二个打开后您是否希望背景变暗？
你能告诉我们你的问题吗
@FarzadSalimiJazi 是的，如果第二个模式在第一个模式上打开，我希望背景是暗的。
所以只要把modal的背景改成透明黑色，什么都不会变

标签： jquery html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

为多个模式覆盖默认 Bootstrap 的 css 将解决您的问题。

方法#01：

如果您只有 2 个模态框，则以下 css 将起作用。

.modal-backdrop + .modal-backdrop {
  z-index: 1040;
}
.modal + .modal {
  z-index: 1050;
}

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.modal + .modal {
  z-index: 1060;
}

.modal-backdrop + .modal-backdrop {
  z-index: 1050;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch first modal
</button>

<div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">first</h4>
      </div>
      <div class="modal-body">
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
  Launch second modal
</button>
<p>
Something
</p><p>
Something
</p><p>
Something
</p><p>
Something
</p><p>
Something
</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">second</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

方法#02：

但是如果有很多嵌套的modals，你可以使用下面的技巧：

.modal-backdrop {
  display: none;
}

.modal {
  background: rgba(0, 0, 0, 0.5);
}

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.modal-backdrop {
  display: none;
}

.modal {
  background: rgba(0, 0, 0, 0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch first modal
</button>

<div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">first</h4>
      </div>
      <div class="modal-body">
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
          Launch second modal
        </button>
        <p>
          Something
        </p><p>
        Something
        </p><p>
        Something
        </p><p>
        Something
        </p><p>
        Something
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">second</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

【讨论】：

效果很好！！但是，就我自己而言，我有 3 个模态。因此，在单击任何上一个按钮时在多个模式之间切换。我只是为每个类附加了一个类，并根据我打开它们的顺序更改了它们的 z-index 值......比如 .modal.first { z-index: 9999 }, .modal.second { z-index: 9998 } ...然后将 sn-p 用于上面使用的 .modal-backdrop 和 .modal

【解决方案2】：

已为您修复 :) http://jsfiddle.net/cqLex5ga/4/

#myModal2 {
    background: rgba(0,0,0,0.7);
}

【讨论】：

这只是在已经有 2 层背景的基础上增加了另一层黑色。
你只是想要一个视觉效果，功能仍然是正确的，因为在子模式外部单击仍然会关闭它，所以功能仍然存在，但这种方式的用户体验是正确的。

【解决方案3】：

最简单的方法是

.modal {
  background: rgba(0, 0, 0, 0.5) !important; 
}
.modal-backdrop {
  display: none !important;
}

【讨论】：

【解决方案4】：

虽然@user1389637 已经回答了你的问题，但我还是建议你使用一些jQuery 事件来打开/关闭之前模态的不透明度。您还可以将这些事件用于其他目的。

$("#myModal2").on('show.bs.modal', function () {
        $("#myModal").css("opacity", "0.5");
});

$("#myModal2").on('hide.bs.modal', function () {
        $("#myModal").css("opacity", "1");
});

Fiddle

【讨论】：

【解决方案5】：

如果您的 HTML 保持不变，这应该可以工作。 http://jsfiddle.net/k2coz893/5/

.modal + .modal {
  z-index:1050;
}
.modal-backdrop + .modal-backdrop{
  z-index:1045;
}

或者您可以将新类添加到新模态以实现相同效果

【讨论】：