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 弹出窗口?