剑道角多模态叠加

Question

我有两个情态动词。一个模态有一个按钮显示另一个模态在它的顶部。当第二个模态打开时，我如何调整k叠加以显示在第一个模态上。目前我有这个:

<div class="k-overlay" *ngIf="modalOpened"></div>

当系统中的模态打开时，此叠加将显示。但是它只是在背景上添加了一个叠加而不是模态

我试着玩z-index，但是它把事情搞砸了。

Answer 1

你可以使用"ngx-bootstrap"模态。

• 使用"嵌套模式">

访问https://valor-software.com/ngx-bootstrap/#/情态动词# 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">&times;</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">&times;</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">&times;</span>
</button>
</div>
<div class="modal-body">
This is third modal <br>
Click <b>&times;</b> to close modal.
</div>
</div>
</div>
</div>