html - Bootstrap 模态背景
问题描述
我在一个页面上有 2 个不同的引导模式我希望 2 个 .modal-backdrop 类表现不同。我该如何做到这一点?这是示例代码:
<!-- Cancel Modal -->
<div class="modal fade" id="cancelModal"
tabindex="-1" role="dialog" aria-labelledby="cancelModal"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="cancelModalLabel">Cancel Warning</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to cancel the form?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary"
(click)="cancel()">Yes</button>
</div>
</div>
</div>
</div>
<!-- Submit Modal -->
<div class="modal fade" id="submitModal" tabindex="-1"
role="dialog" aria-labelledby="submitModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="submitModalLabel">Submit Warning</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to submit and close the form?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" routerLink="/submission"
(click)="submitForm()">Yes</button>
</div>
</div>
</div>
</div>
解决方案
推荐阅读
- python - 模型与(META)继承冲突
- c# - 如何将for循环修改为Parallel.For?C#
- php - Curl 命令运行顺利,但将其转换为 php 并运行让我“500 内部服务错误”
- twig - 我怎样才能让我的表格只显示年份(而不是 dmy, mm:hh)?
- linux - openconnect vpn not change resolv.conf from GUI . Fedora 29
- java - 如何使用 selenium 以角度处理 webtables?
- c++ - 使用类继承将单喜欢列表转换为双向链接列表
- docker - 在 Docker 中服务如何开始“启动”的排序 - (在启动另一个服务之前等待一个服务完全启动)
- python-3.x - Python:如何在盒须图中打印盒子、胡须和异常值?
- reactjs - 错误:使用 redux 进入 react-navigation v3