脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap 弹出对话框

利用BootStrap弹出二级对话框的简单实现方法

 更新时间：2016年09月21日 09:27:09   作者：Franson  
弹出二级对话框，即在对话框的基础上再弹出一个对话框.这篇文章主要介绍了利用BootStrap弹出二级对话框的简单实现方法的相关资料,需要的朋友可以参考下

弹出二级对话框，即在对话框的基础上再弹出一个对话框。这对于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弹出二级对话框的简单实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 浅谈JavaScript中的对象及Promise对象的实现

    浅谈JavaScript中的对象及Promise对象的实现

    这篇文章主要介绍了浅谈JavaScript中的对象及Promise对象的实现的相关资料,需要的朋友可以参考下
    2015-11-11
  • 深入理解JavaScript中的并行处理

    深入理解JavaScript中的并行处理

    这篇文章给大家详细介绍了JavaScript中的并行处理，一直以来，JavaScript 都并没有多线程的能力，而单线程在让开发者方便的同时，也使它一直不能处理计算量复杂的场景，唯一方法就是让服务端去做。下来通过这篇文章我们一起来看看详细介绍。
    2016-09-09
  • ReactHooks+ts(函数组件)实现原生轮播的示例

    ReactHooks+ts(函数组件)实现原生轮播的示例

    这篇文章主要介绍了ReactHooks+ts函数组件实现原生轮播，在这里下载依赖第一个是js依赖第二个是ts依赖，通过实例代码介绍了创建tsx文件的方法,需要的朋友可以参考下
    2022-05-05
  • PHPExcel中的一些常用方法汇总

    PHPExcel中的一些常用方法汇总

    这篇文章主要介绍了PHPExcel中的一些常用方法汇总,本文直接给出操作代码实例,代码中对常用方法给出了注释,需要的朋友可以参考下
    2015-01-01
  • js 时间函数应用加、减、比较、格式转换的示例代码

    js 时间函数应用加、减、比较、格式转换的示例代码

    时间函数应用加、减、比较、格式转换等等，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助
    2013-08-08
  • JavaScript中的类与实例实现方法

    JavaScript中的类与实例实现方法

    这篇文章主要介绍了JavaScript中的类与实例实现方法,非常巧妙的模拟了类与实例的实现过程,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • js showModalDialog参数的使用详解

    js showModalDialog参数的使用详解

    本篇文章主要是对js中showModalDialog参数的使用进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • js操作二级联动实现代码

    js操作二级联动实现代码

    网上二级（多级）联动的例子也不少，有各种不同的操作方法。我所采用的方法网上也应该有的，不过我还没有看到过。
    2010-07-07
  • javascript实现炫酷的拖动分页

    javascript实现炫酷的拖动分页

    非常酷的javascript拖动分页功能，无缝循环分页，拖动鼠标即可完成分页，鼠标向左拖动回到前一页，向右拖动则翻开第二页，还带有动画特效，着实很不错，界面黑色，非主流风格，相信很多人会喜欢的。
    2015-05-05
  • JavaScript作用域与作用域链深入解析

    JavaScript作用域与作用域链深入解析

    这篇文章主要是对JavaScript作用域和作用域链作简单的介绍，希望能帮助大家更好的学习JavaScript
    2013-12-12

最新评论