ngx-bootstrap 在模态上将子模态居中

Question

我有一个使用 ngx-bootstrap v5.6.1 的 Angular 8 应用程序，它打开一个模式，然后在某些情况下，在第一个模式之上打开第二个模式。两者都工作得很好，但第二个模态以屏幕为中心而不是在它下面的模态。这很可能是因为我将 class: 'modal-md modal-dialog-centered' 传递到第二个模态中，但我无法找到重新定位第二个模态的方法，除了删除“居中”到让它出现在顶部。

我想将第二个模态在屏幕上向上移动 10% - 20%。两个模态都是它们自己的独立组件，因为我想让第二个模态在整个应用程序中可重用。

这就是我如何调用模态

第一个模态：

this.bsModalRef = this.modalService.show(ModalComponent, { class: 'modal-lg', backdrop: 'static' });

第二个模态：

this.bsModalRefConf = this.modalService.show(ConfirmModalComponent, { class: 'modal-md modal-dialog-centered', backdrop: 'static' });

这些都使用来自 ngx-bootstrap/modal 的 BsModalService

谢谢！

Answer 1

也将.modal-dialog-centered 应用于大模态，并将较小的模态向上移动，为其.modal-content 提供底部边距。它必须是两倍大小，因为它使用 flexbox 居中。因此，要将其向上移动 15vh（设备屏幕高度的 15%），您需要底部边距为 30vh。

查看它的工作情况（在扩展模式下）：

#exampleModalCenter2 .modal-content {
  margin-bottom: 30vh;
}
.modal-content {
  box-shadow: 0 5px 6px -3px rgba(0,0,0,.2), 0 9px 12px 1px rgba(0,0,0,.14), 0 3px 16px 2px rgba(0,0,0,.12);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch first modal
</button>

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#exampleModalCenter2">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalCenter2" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-md" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

由于只能使用 hacky DOM 操作在另一个模态之上渲染背景，我使用box-shadow 将它们直观地分开。

更好的方法是在打开较小的模态时也更改较大模态的不透明度，并将其z-index 降低1。您可以使用：

1. javascript：根据小类是否打开动态地向大类添加一个类，并在应用该类时更改其opacity 和z-index。
2. css：要不使用 js，您只需在 DOM 中将大的放在小的之后，作为兄弟姐妹，并使用 ~ 组合符。演示：

#exampleModalCenter2 .modal-content {
  margin-bottom: 20vh;
}
.modal-content {
  box-shadow: 0 5px 6px -3px rgba(0,0,0,.2), 0 9px 12px 1px rgba(0,0,0,.14), 0 3px 16px 2px rgba(0,0,0,.12);
}
.modal.show {
  opacity: 1;
  transition: opacity .3s ease-in-out;
}
.modal.show ~ .modal.show,
.modal.show ~ .modal.show * {
  opacity: .5;
  pointer-events: none;
  z-index: 1049;
}
.modal-backdrop.show ~ .modal-backdrop.show {
  opacity: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch first modal
</button>

<div class="modal fade" id="exampleModalCenter2" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-md" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#exampleModalCenter2">Open second modal</button>
      </div>
    </div>
  </div>
</div>

...此时将小的向上移动变得不那么重要了。