如何解决剑道角度多模态叠加
我有 2 个模态。 一个模态有一个按钮,用于在其顶部显示另一个模态。 当第二个模态打开时,如何调整 k-overlay 以显示在第一个模态上。 目前我有这个:
<div class="k-overlay" *ngIf="modalOpened"></div>
只要打开系统中的模态,就会显示此叠加层。但它只为背景添加了一个叠加层,而不是模态
我曾尝试使用 z-index
但它把事情搞砸了。
解决方法
您可以使用“ngx-bootstrap”模态。
- 使用“嵌套模态”
访问https://valor-software.com/ngx-bootstrap/#/modals#directive-nested
示例代码:
<button type="button" class="btn btn-primary" (click)="parentModal.show()">Open parent modal</button>
<div class="modal fade" bsModal #parentModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="dialog-nested-name1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 id="dialog-nested-name1" class="modal-title pull-left">First modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="parentModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<button type="button" class="btn btn-primary" (click)="childModal.show()">Open second modal</button>
</div>
</div>
</div>
</div>
<div class="modal fade" bsModal #childModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="dialog-nested-name2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="dialog-nested-name2" class="modal-title pull-left">Second modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="childModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
This is second modal <br>
<button type="button" class="btn btn-primary" (click)="thirdModal.show()">Open third modal</button>
</div>
</div>
</div>
</div>
<div class="modal fade" bsModal #thirdModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="dialog-nested-name3">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 id="dialog-nested-name3" class="modal-title pull-left">Third modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="thirdModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
This is third modal <br>
Click <b>×</b> to close modal.
</div>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。