仅为嵌套模式显示模式背景

Question

我正在使用 AngularJS，并且在单个 html 中有许多 Bootstrap 模式。 由于我需要在访问模态时与周围区域进行交互，因此我设置了：

.modal-backdrop {
    display: none;
}

但是，现在我需要添加一个必须有背景的嵌套模式。 我该怎么做？

Answer 1

您可以确保（同时）打开的第一个模态框没有背景...
在每次点击 data-toggle='modal' 按钮时检查它。

$(document).on("click","[data-toggle='modal']",function(){
  $(".modal-backdrop").eq(0).css({"display":"none"});

  // if more than 1 modal openned.
  if($(".modal-backdrop").length>1){

    // move backdrop up (in z)
    var ZindexBackdrop = parseInt($(".modal-backdrop").eq(0).css("z-index"))+20;
    console.log("Backdrop z-index: "+ZindexBackdrop);
    $(".modal-backdrop").eq(1).css({"z-index":ZindexBackdrop});

    // move modal up (in z)
    var ZindexModal = parseInt($(".modal").eq(0).css("z-index"))+20;
    console.log("Modal z-index: "+ZindexModal);
    $(".modal").eq(1).css({"z-index":ZindexModal});
  }
});

要更改第一个上方的第二个模态/背景z-index...
您的第二个模态必须不真正“嵌套”在第一个模态中。
因为如果父级定义了一个子级的z-index，则无法更改。

但要获得所需的嵌套效果，请将第二个模态仅触发按钮放在第一个模态中。

$(document).on("click","[data-toggle='modal']",function(){
  $(".modal-backdrop").eq(0).css({"display":"none"});

  // if more than 1 modal openned.
  if($(".modal-backdrop").length>1){

    // move backdrop up (in z)
    var ZindexBackdrop = parseInt($(".modal-backdrop").eq(0).css("z-index"))+20;
    console.log("Backdrop z-index: "+ZindexBackdrop);
    $(".modal-backdrop").eq(1).css({"z-index":ZindexBackdrop});

    // move modal up (in z)
    var ZindexModal = parseInt($(".modal").eq(0).css("z-index"))+20;
    console.log("Modal z-index: "+ZindexModal);
    $(".modal").eq(1).css({"z-index":ZindexModal});
  }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>



<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal 1 Header</h4>
      </div>
      <div class="modal-body">

        <!-- Trigger the modal with a button -->
        There is no modal back-drop...<br>
        Open this second one!<br>
        <br>
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal</button>


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>


<!-- Nested modal -->
<div id="myModal2" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal 2 Header</h4>
      </div>
      <div class="modal-body">
        This is the second modal.<br>
        <b>And there is a back-drop.
          </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>
</div>
<!-- Nested modal -->