在现代网页设计中，模态对话框（Modal Dialog）是一种非常常见的用户界面元素，它允许用户在不离开当前页面的情况下，查看或提交额外的信息。本文将介绍如何使用JavaScript、jQuery、jQuery UI和Bootstrap等技术，动态加载模态对话框，并实现一些高级功能，如打开URL、创建嵌套对话框、显示加载动画、打开外部页面、移动和调整对话框大小等。
要使用本文介绍的代码，首先需要准备以下资源：
这些库可以通过CDN链接或下载到本地服务器上。
本文的代码主要包含在BsModal.js文件中。以下是关键函数的实现：
这个函数用于显示模态对话框。它接受以下参数：
sUrl：要加载的页面的URL。iWidth：模态对话框的宽度。可选。iHeight：模态对话框的高度。可选。oWin：调用模态对话框页面的窗口对象。可选。函数的实现代码如下：
function ShowModal(sUrl, iWidth, iHeight, oWin) {
if (oWin + "" === "undefined") oWin = window;
if (iWidth + "" === "undefined") iWidth = $(window).width() - 100;
if (iHeight + "" === "undefined") iHeight = $(window).height() - 150;
oBsModal.oWinList.push(oWin);
var iIndex = oBsModal.oWinList.length;
// ...省略部分代码...
$("body").append('...');
$("body").append('...');
$("body").append('');
// ...省略部分代码...
$("body").append('');
$("body").append('');
$("div[id^='popupContainer']").modal();
$("iframe[id^='popupFrame']").css({ height: iHeight });
$("div[id^='popupContainer']").on('hidden.bs.modal', function () {
if (oBsModal.oWinList.length > 0) oBsModal.oWinList.length--;
});
DiaMakeDraggable(iIndex);
}
这个函数用于使模态对话框可拖动。
function DiaMakeDraggable(id) {
var o = $("#idDiaOverlay" + id);
$("#modal-content" + id).resizable({
alsoResize: "#popupFrame" + id,
start: function (event, ui) {
o.height(o.parent().height());
o.show();
},
stop: function (event, ui) {
o.hide();
}
});
$("#modal-content" + id).draggable({
start: function (event, ui) {
o.height(o.parent().height());
o.show();
},
stop: function (event, ui) {
o.hide();
}
});
}
这个函数用于隐藏模态对话框。
function HideModal() {
var iIndex = oBsModal.oWinList.length;
$("div[id^='popupContainer']").modal("hide");
}
这个函数用于获取当前模态对话框的窗口对象。
function GetModalWin() {
return oBsModal.oWinList[oBsModal.oWinList.length - 1];
}
这个函数用于设置模态对话框的标题栏。
function SetPopupTitleBar(oIframe, iIndex) {
try {
$("#popupTitle" + iIndex).html(oIframe.contentWindow.document.title);
} catch (ex) {
$("#popupTitle" + iIndex).hide();
}
$("#idDiaLoading" + iIndex).hide();
$("#popupFrame" + iIndex).show();
}
以下是如何在主页面和对话框页面中使用ShowModal函数的示例：
// 在主页面中
<input type="button" class="btn btn-info" value="Open Modal1.htm" onclick="ShowModal('Modal1.htm',300,430)">
// 在对话框页面中
<input type="button" class="btn btn-info" value="Open Modal2.htm" onclick="parent.ShowModal('Modal2.htm',300,350,window)">
<button type="button" class="btn btn-default" onclick="parent.HideModal()">
Cancel
</button>