从模态中打开模态，背景z-index

Question

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

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 -->

Answer 1

为你修复了:) http://jsfiddle.net/cqLex5ga/4/

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

Answer 2

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

方法＃01：

如果您只有2个模态，则可以使用css。

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

＆＃13;

＆＃13;

@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;
}

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;

方法＃02：

但是，如果有许多嵌套模态，您可以使用以下技巧：

.modal-backdrop {
  display: none;
}

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

＆＃13;

＆＃13;

@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);
}

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

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

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

Fiddle

Answer 4

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

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

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