ngx-bootstrap 将子模态置于模态之上
ngx-bootstrap center a submodal over a modal
我有一个使用 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
谢谢!
也将 .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">×</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">×</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
。您可以使用以下方法实现此目的:
- javascript:根据小的是否打开动态给大的加一个class并改变它的
opacity
和 z-index
当应用了 class 时。
- 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">×</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">×</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>
...此时将小的向上移动变得不那么重要了。
我有一个使用 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谢谢!
也将 .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">×</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">×</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
。您可以使用以下方法实现此目的:
- javascript:根据小的是否打开动态给大的加一个class并改变它的
opacity
和z-index
当应用了 class 时。 - 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">×</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">×</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>
...此时将小的向上移动变得不那么重要了。