关于bootstrap弹出二级对话框的使用
2016-07-28 10:41
471 查看
弹出二级对话框,即在对话框的基础上再弹出一个对话框。这对于CRM管理类系统来说应用场景很常见。看到网上有关于实现二级弹出框的方法,需要在一级对话框页面上添加不少css样式。其实,完全可以不用这么麻烦。
利用bootstrap实现二级对话框很简单,只需要在主页面上添加两个含有class="modal"的DIV标签。如下面代码:
这样就可以在id="codeMapEditModal"的对话框弹出之后,在该对话框对应的js脚本中调用如下方法即可弹出id="modal_newDialog"的对话框。
不过需要注意的是,在对话框的关闭按钮上调用的方法如下:
一级对话框关闭按钮的方法为如下绿色标注所示:
二级对话框关闭按钮的方法为如下绿色标注所示:
如果不这样做,在关闭二级对话框的时候将会关闭一级对话框。
利用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实现标签页效果
- Web 前端 UI 框架 Bootstrap
- bootstrap validator setting部分 中文文档
- 用bootstrap做下拉菜单,并使用jQuery实现从服务器加载下拉菜单的item。
- disable bootstrap
- CSS框架 bootstrap
- bootstrap实现页面布局效果
- bootstrap 实现简单轮播
- @-ms-viewport
- Hammer.js——给bootstrap添加触屏功能
- rebar3 bootstrap fetch_fail 记录
- 20分钟打造属于你的Bootstrap站点
- 第一次接触神奇的Bootstrap网格系统
- 第一次接触神奇的Bootstrap表单
- bootstrap模态框中含有echart图表的打印
- bootstrap中的glyphicon问题
- 使用Bootstrap FileInput遇到的坑
- bootstrap3上传特效
- 响应式布局之使用bootstrap
- 初识bootstrap