动态加载模态对话框

在现代网页设计中，模态对话框是一种常见的用户交互方式，它允许用户在不离开当前页面的情况下，查看或输入信息。BsModal.js是一个JavaScript库，它使用iframe技术动态加载模态对话框，提供了一种灵活的方式来实现这一功能。通过这种方式，可以加载任意数量的模态对话框，而不需要在页面上预先定义它们。

要使用BsModal.js，首先需要将库文件解压缩到项目目录中。然后，通过浏览器访问Default.htm页面，这是主页面，用于触发模态对话框的创建。BsModal.js文件包含了实现模态对话框功能的主要代码。

BsModal.js提供了以下功能：

• 使用iframe打开URL到模态对话框中。
• 创建嵌套的对话框。
• 在页面加载时显示加载器（spinner）。
• 打开外部页面到全屏对话框中。
• 在页面上移动模态对话框。

为了使用BsModal.js，需要引入以下三个外部库：

• jQuery (1.12.3)
• Bootstrap (3.3.6)
• Font-awesome (4.4.0)

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

• sUrl：要加载的页面的URL。
• iWidth：模态对话框的宽度。可选。如果未指定，将使用浏览器窗口的宽度。
• iHeight：模态对话框的高度。可选。如果未指定，将使用浏览器窗口的高度。
• oWin：调用模态对话框页面的窗口对象。可选。

在主页面（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>