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更改为第一个...以上你的第二个模态必须 NOT 真正被“嵌套”在第一个模式中因为如果父母有一个孩子的z-index，则无法更改。{/ p>

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

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

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

1 个答案: