html Bootstrap多模态叠加弹出窗口
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html Bootstrap多模态叠加弹出窗口相关的知识,希望对你有一定的参考价值。
<script type="text/javascript">
$('#openBtn').click(function(){
$('#myModal').modal({show:true})
});
</script>
<style type="text/css">
.modal:nth-of-type(even) {
z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
z-index: 1041 !important;
}
</style>
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
<br>
<br>
<br>
<br>
<br>
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Second Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
以上是关于html Bootstrap多模态叠加弹出窗口的主要内容,如果未能解决你的问题,请参考以下文章
bootstrap添加多个模态对话框支持
bootstrap怎么弹出窗口
打开 Bootstrap 模式弹出窗口时启用背景
我如何使用 Bootstrap4 模态在 Django 中制作功能正常的删除确认弹出窗口
JavaFX如何实现模态窗口
如何通过单击外部来关闭 Twitter Bootstrap 弹出窗口?