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

Question

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

use*_*252 6 html css jquery twitter-bootstrap twitter-bootstrap-3

我需要能够在另一个模态中打开模态(而第一个模态保持打开状态).这是一个例子:

当你打开第二个模态时,你会注意到第二个模态的背景/背景没有覆盖第一个模态(即当第二个模态打开时,第一个模态仍然可以清晰地看到).这似乎是因为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 -->

Run Code Online (Sandbox Code Playgroud)

Answer 1

Moh*_*man 8

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

方法#01：

如果您只有 2 个模态，则遵循 css 将起作用。

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

方法#02：

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

.modal-backdrop {
  display: none;
}

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

.modal-backdrop {
  display: none;
}

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

Edd*_*ers 6

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

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，5 月前
查看次数：	2115 次
最近记录：	9 年，5 月前