弹出二级对话框，即在对话框的基础上再弹出一个对话框。这对于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">&times;</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">&times;</button>

    <h4 class="modal-title" id="myModalLabel">二级对话框</h4>
</div>

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

关于bootstrap弹出二级对话框的使用的更多相关文章

  1. 使用bootstrap 弹出效果演示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  2. JS实现弹出层对话框

    点击按钮后,弹出层对话框,可交互,点击关闭后才关闭掉对话框. 效果图: 源码: <!doctype html> <html> <head> <meta cha ...

  3. Bootstrap弹出框(modal)垂直居中

    最近在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到这个东东,有很大抵触,觉得不好,但用起来我觉得和别的弹出框真没什么两样.废话 ...

  4. ASP.NET点击按钮弹出确认对话框方法

    开发asp.net网页应用程序的时候,有些页面的按钮需要增加一个确认对话框,比如: 实现这个功能比较简单,代码这样写: Button.Attributes["onclick"] = ...

  5. 转：jQuery弹出二级菜单

    <html> <head> <meta http-equiv="content-type" content="text/html; char ...

  6. bootstrap 弹出框点击其他区域时弹出框不消失选项设置

    默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...

  7. 弹出消息对话框ScriptManager

    //直接调用WebMessageBox方法 #region 弹出消息对话框 /// <summary> /// 弹出消息对话框 /// </summary> /// <p ...

  8. Windows服务弹出MessageBox对话框

    Windows服务弹出MessageBox对话框 自从Windows升级到Vista版本后,系统服务就不在允许弹出那些惨绝人寰的MessageBox了(至于为什么不让弹出,原理有点小复杂,我也不是很门 ...

  9. 每日学习心得：CustomValidator验证控件验证用户输入的字符长度、Linq 多字段分组统计、ASP.NET后台弹出confirm对话框，然后点击确定，执行一段代码

    2013-9-15 1.    CustomValidator验证控件验证用户输入的字符长度 在实际的开发中通常会遇到验证用户输入的字符长度的问题,通常的情况下,可以写一个js的脚本或者函数,在ASP ...

随机推荐

  1. java的几个版本以及jre，jdk等概念——【转载】JDK、Java SE、Java EE、Java ME我该选

    我们平时使用的一些软件,有一部分需要Java环境的支持,但是SUN那么多的产品,让人眼花缭乱的版本号,前看后看都差不多的缩写,让我们选择起来的时候常常望而却步,只好跟着感觉走.所以下面我要介绍的就是那 ...

  2. aix installp软件包管理工具

    软件可以安装成两种状态:applied和committed.Applied状态保存了原来以前版本的软件,它把以前版本存储在/usr/lpp/PackageName目录下.这种方式可以回滚到以前的软件版 ...

  3. (Pre sell) ZOPO ZP998 (C2 II) 5.5 inch smart phone True Octa Core MTK6592 1920X1080 FHD screen 401 ppi 2GB/32GB 14.0Mp camera-in Mobile Phones from Electronics on Aliexpress.com

    (Pre sell) ZOPO ZP998 (C2 II) 5.5 inch smart phone True Octa Core MTK6592 1920X1080 FHD screen 401 p ...

  4. SEO人员应该突破的5大思想误区

    1.外链误区 很多人在做网站优化的时候容易陷入外链怪圈,认为外链就是网站优化的一切,只要做好外链排名就会上去,让他不做外链了他将不知道做什么.特别是外链专员和一些初级SEO人员,优化网站只知道到哪里发 ...

  5. hdu 5256 序列变换 (LIS变形)

    序列变换 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  6. Java基础学习笔记2

    运算符: 重点:++和--运算符; a++ (a--):表示先将a的原值带入计算,计算完毕后,再将a的值进行+1(-1); ++a (--a):先将a的值进行+1(-1)运算,然后将+1(-1)以后的 ...

  7. ASP.NET设置焦点到输入框

    Page.SetFocus(txtLoginName);

  8. PHP自学4——通过mail函数将feedback界面用户填写表单信息发送至指定邮箱

    这一讲的内容依旧简单(谁叫PO主水平菜,依旧是个弱鸡ORZ),通过PHP的内置mail函数将一个反馈界面的信息发送到指定邮箱.在Windows平台不能直接需要使用该函数,需要下载一个sendmail并 ...

  9. [hadoop]Cannot create directory /mdrill/tablelist/fact_seller_all_d. Name node is in safe mode.

    在执行mdrill创建表的时候报如下异常(蓝色部分为关键): [mdrill@hadoop1101 bin]$ ./bluewhale mdrill create ./create.sql higo ...

  10. c#导出文件，文件名中文乱码解决方法。

    public string clFielName(string fileName) { System.Web.HttpContext curContext = System.Web.HttpConte ...