bootstrap中2个modal弹框
时间:2019-01-16
本文章向大家介绍bootstrap中2个modal弹框,主要包括bootstrap中2个modal弹框使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
bootstrap的modal 1上弹出modal 2,modal 2上弹出一个iview的确认框;
```
<script>
setModalsAndBackdropsOrder:function() {
var modalZIndex = 1040;
$('.modal.in').each(function(index) {
var $modal = $(this);
modalZIndex++;
$modal.css('zIndex', modalZIndex);
$modal.next('.modal-backdrop.in').addClass('hidden').css('zIndex', modalZIndex - 1);
});
$('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeClass('hidden');
}
</script>
```
借鉴1自:https://blog.csdn.net/k358971707/article/details/71908862?utm_source=blogxgwz2
借鉴2自:https://blog.csdn.net/wzp6010625/article/details/78728894?utm_source=blogxgwz5
然后将对应的第一个modal 1的id,以及触发弹出modal 1 的方法中,将对应的设置z-index的方法加上
showModalOne: function (data) {
$('#modalOne').on('show.bs.modal', '.modal', function(event) {
$(this).appendTo($('#modalOne'));
}).on('shown.bs.modal', '.modal.in', function(event) {
setModalsAndBackdropsOrder();
}).on('hidden.bs.modal', '.modal', function(event) {
setModalsAndBackdropsOrder();
});
$('#modalOne').modal('show');
},
<div class="modal fade bs-example-modal-lg" id="modalTwo" tabindex="-1" role="dialog" aria-labelledby="modalTwoLabel"
aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header"> <!--data-dismiss="modal"-->
<button type="button" class="close" @click="hidemodal('modalTwo')" aria-hidden="true">×</button>
<h4 class="modal-title" id="modalTwoLabel">
弹窗2
</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer form-group" style="text-align:left">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-primary">保存</button>
<button type="button" class="btn btn-default" @click="hidemodal('modalTwo')">取消</button>
</div>
</div>
</div>
</div>
</div>
<script>
//对应的script方法中将hidemodal方法加上
hidemodal: function (id) {
$('#' +id).modal('hide');
},
</script>
如果还有iview的确认框
this.$Modal.confirm(config);
//在确认框弹窗来之后,将对应的z-index的进行调整
</script>
$('.ivu-modal-wrap').css('z-index','1601');
$('.ivu-modal-mask').css('z-index','1601');
- Orchid兰花协议:分布式匿名代理网络
- 不加班就等于养老?
- 非主流域名 “汽车”auto.io结拍
- 武哥自学Python笔记(一)
- 机器学习VS放射科医生
- python学习手册-环境安装和配置
- 全球最大家谱网站Ancestry.com意外泄露了30万名用户的登录凭证
- 摸金Redis漏洞
- 机器人越来越像人,你会担心你的工作被人工智能取代吗?
- 一句代码实现批量数据绑定[上篇]
- 机器学习-从高频号码中预测出快递送餐与广告骚扰
- MS Windows 下基于Atom的LaTeX编译环境的配置
- WCF中的Binding模型之一: Binding模型简介
- WCF中的Binding模型之一: Binding模型简介
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例