使用 Bootstrap 进行嵌套模态对话框

• 下载源代码 - 858.4 KB

引言

这个项目的目标是展示如何创建嵌套模态框。每个模态框都是通过 iframe 从另一个页面创建的。这种方法允许您根据需要动态加载任意数量的模态框。将 bsModal.zip 解压缩到某个目录，然后在浏览器中打开 Default.htm。

大部分代码包含在 BsModal.js 文件中。该文件将允许您

1. 使用 iFrame 在模态对话框中打开 URL
2. 创建嵌套对话框
3. 在页面加载时显示加载指示器
4. 以全屏对话框打开外部页面
5. 在页面上移动模态对话框

该代码使用了三个外部库

1. jQuery (1.12.3)
2. Bootstrap (3.3.6)
3. Font-awesome (4.4.0)

Using the Code

要使用此代码，请在创建第一个对话框的页面中包含 BsModal.js 文件。关键函数是 ShowModal()。它接受以下参数

sUrl	要加载的页面的 URL
iWidth	模态框的宽度。可选。当银行窗口宽度将被使用
iHeight	模态框的高度。可选。当银行窗口高度将被使用
oWin	调用模态框页面的 windows 对象。可选

从主页面 (Default.htm) ShowModal() 函数可以这样使用

 <input type="button" class="btn btn-info" value="Open Modal1.htm" 
  onclick="ShowModal('Modal1.htm',300,430)">

从一个对话框页面，ShowModal() 函数可以这样使用

 <input type="button" class="btn btn-info" value="Open Modal2.htm" 
  onclick="parent.ShowModal('Modal2.htm',300,350,window)"> 

可以通过调用 HideModal() 函数关闭模态对话框，如下所示

<button type="button" class="btn btn-default" onclick='parent.HideModal()'>Cancel</button> 

历史

• 2016 年 7 月 7 日：初始版本