利用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 相关文章推荐
js控制表单操作的常用代码小结
Aug 15 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
Node.js笔记之process模块解读
May 31 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 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基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
说明的比较细的php 正则学习实例
2008/07/30 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
python怎么自定义捕获错误
2020/06/29 Python
python3爬虫中异步协程的用法
2020/07/10 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
考试退步检讨书
2014/01/15 职场文书
派出所所长先进事迹
2014/05/19 职场文书
开学典礼策划方案
2014/05/28 职场文书
爬山的活动方案
2014/08/16 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书