利用BootStrap弹出二级对话框的简单实现方法


Posted in Javascript onSeptember 21, 2016

弹出二级对话框,即在对话框的基础上再弹出一个对话框。这对于CRM管理类系统来说应用场景很常见。看到网上有关于实现二级弹出框的方法,需要在一级对话框页面上添加不少css样式。其实,完全可以不用这么麻烦。

利用bootstrap实现二级对话框很简单,只需要在主页面上添加两个含有class="modal"的DIV标签。如下面代码:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="decorator" content="window" />
<style type="text/css">
th,td {
white-space: nowrap;
text-align:center;
}
</style>
</head>
<body>
<div class="row">
......
......
...... 
<!-- 代码映射编辑对话框(属于一级对话框) -->
<div class="modal" id="codeMapEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
<!-- Modal 新增[源系统]代码[类型](属于二级弹出对话框) -->
<div class="modal" id="modal_newDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
<script type="text/javascript" src="codeMapList.js"></script>
</body>
</html>

这样就可以在id="codeMapEditModal"的对话框弹出之后,在该对话框对应的js脚本中调用如下方法即可弹出id="modal_newDialog"的对话框。

function newDataItem(param){
$('#modal_newDialog').modal({
keyboard: false,
backdrop:'static',
remote : Global.ctx + "/html/tuple/codeInfo.html" 
});
}

不过需要注意的是,在对话框的关闭按钮上调用的方法如下:

一级对话框关闭按钮的方法为如下绿色标注所示:

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
<h4 class="modal-title" id="codeMapEditHeader">XXX</h4></div>

二级对话框关闭按钮的方法为如下绿色标注所示:

<div class="modal-header">
<button type="button" class="close" onclick="modal_close(this)" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">二级对话框</h4></div>

如果不这样做,在关闭二级对话框的时候将会关闭一级对话框。

以上所述是小编给大家介绍的利用BootStrap弹出二级对话框的简单实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript CSS画图之基础篇
Jul 29 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 Javascript
详解JS ES6编码规范
May 07 Javascript
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
angular route中使用resolve在uglify压缩后问题解决
Sep 21 #Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 #Javascript
D3.js实现柱状图的方法详解
Sep 21 #Javascript
AngularJS ng-style中使用filter
Sep 21 #Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 #Javascript
JS实现简单的tab切换选项卡效果
Sep 21 #Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 #Javascript
You might like
MySql中正则表达式的使用方法描述
2008/07/30 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
layui表格实现代码
2017/05/20 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
vue中如何使用ztree
2018/02/06 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
javascript实现时钟动画
2020/12/03 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
详解使用Python处理文件目录的相关方法
2015/10/16 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
Python中正则表达式的用法总结
2019/02/22 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
Python持续监听文件变化代码实例
2020/07/22 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
人力管理专业毕业生求职信
2014/02/27 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
python基础学习之递归函数知识总结
2021/05/26 Python
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
javascript的setTimeout()使用方法总结
2021/11/20 Javascript