利用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 相关文章推荐
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
jQuery中 noConflict() 方法使用
Apr 25 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
JS 数字转换研究总结
Dec 26 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
Vue filter介绍及其使用详解
Oct 21 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
怎样在vue项目下添加ESLint的方法
May 16 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
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
php程序效率优化的一些策略小结
2010/07/17 PHP
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
使用python Django做网页
2013/11/04 Python
初学Python实用技巧两则
2014/08/29 Python
python实现逆波兰计算表达式实例详解
2015/05/06 Python
Python聊天室实例程序分享
2016/01/05 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
用Python制作音乐海报
2021/01/26 Python
Java如何读取CLOB字段
2013/10/10 面试题
2014年城管工作总结
2014/11/20 职场文书
个人工作能力自我评价
2015/03/05 职场文书
护理专业自荐信范文
2015/03/06 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
教师岗位说明书
2015/09/30 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python