仅显示嵌套模态的模态背景 [英] Display modal-backdrop only for a nested modal

问题描述

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

I'm using AngularJS and have many Bootstrap modals in a single html. Since I need to interact with the surrounding area while accessing the modals, I've set:

.modal-backdrop {
    display: none;
}

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

However, now I need to add a nested modal which must have a backdrop. How do I do this?

推荐答案

您可以确保同时打开的第一个模态没有背景...
每次单击data-toggle='modal'按钮进行检查.

You could ensure no backdrop on the first modal opened (at the same time)...
Checking for it on each data-toggle='modal' button click.

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

To do change the second modal / backdrop z-index above the first...
Your second modal must NOT really be "nested" in the first one.
Because z-index of a child can not be changed if a parent has one defined.

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

But to have the desired nesting effect, place the second modal trigger button only in the first 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});
  }
});

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

这篇关于仅显示嵌套模态的模态背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！