利用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 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
js实现百度搜索提示框
Feb 05 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
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编程开发“虚拟域名”系统
2006/10/09 PHP
让PHP支持页面回退的两种方法
2008/01/10 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
javascript优先加载笔记代码
2008/09/30 Javascript
FLASH 广告之外的链接
2008/12/16 Javascript
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
JavaScript 函数式编程的原理
2009/10/16 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
python语言元素知识点详解
2019/05/15 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
欢迎标语大全
2014/06/21 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
学习教师法的心得体会
2014/09/03 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
Python内置数据类型中的集合详解
2022/03/18 Python