bootstrap3-dialog打开嵌套iframe窗口
bootstrap3-dialog打开嵌套iframe窗口
bootstrap3-dialog是一款第三方提示框插件，但是使用过程中感觉对打开新的远程页面不太友好，而打开表单嵌套在原页面中又显得代码非常臃肿，所以对bootstrap3-dialog进行二次封装，将新页面嵌套进dialog，形成全局统一的打开页面方式。
我们二次封装的时候就不能使用自带的快速初始化dialog了，要重新new一个全新dialog，再进行属性的一一设置，先上个代码
function OpenDialog(id,title,url,height,width,callback) {
height += 'px';
var pagepath = GetRootPath()+url;
var dialogInstance = new BootstrapDialog({
onhidden:callback
});
dialogInstance.setId(id);
dialogInstance.setTitle(title);
dialogInstance.setMessage($('<div><iframe src="'+pagepath+'" style="width:100%;height:'+height+';border-width:0 "></iframe></div>'));
//打开窗口页面增加接受消息监听，在关闭事件后传递消息通知父级页面关闭dialog
window.addEventListener('message', receiveMessage, false);
function receiveMessage(tag) {
var tag = tag.toString();
if(tag='close'){
dialogInstance.close();
}
}
//禁止点击空白关闭窗口
dialogInstance.setCloseByBackdrop(false);
//如果要改变样式，先调用realize方法
dialogInstance.realize();
//原来x关闭按钮也会触发回掉事件，这里把div点击事件重新注册，把dialog的关闭后事件置空
dialogInstance.getModalHeader().find("[class='bootstrap-dialog-close-button']").unbind('click').click(function () {
dialogInstance.onHidden(function () {
})
dialogInstance.getModal().modal('hide');
});
dialogInstance.getModalBody().css('height',height);
dialogInstance.getModalDialog().css('width',width);
dialogInstance.getModalBody().css('padding','0');
dialogInstance.open();
}首先看下我们封装方法的几个参数，id就是dialog的一个标识，title是dialog的标题名字，url为嵌套内的页面地址，height/weight就是高/宽，callback就是dialog关闭时的回调函数，比如新增数据时关闭新增页面调用回调函数刷新列表页，其中对页面的嵌套就是通过对dialog中的内容加载嵌套一个iframe实现，但是这样整体样式会有些问题，所以我们通过对modalbody，modaldialog的一些样式进行了调整，特别注意，需要先调用realize方法对样式的调整才会有作用。
dialog又打开就要关闭，我们不可能只通过x号关闭页面，我们还需要点击关闭，确定这些按钮来关闭页面，这样我们就需要在opener和dialog建立起联系，这里采用的是给页面的message事件注册监听，收到指定的消息，则关闭dialog，能这样做的原因是dialog模态窗口实质上就是在原页面基础上加上了一个div和遮罩层，其实还是属于同一个页面的，所以相互发送message可以收到，所以关闭dialog的代码就如下
function CloseDialog() {
//$("[role='dialog']",window.parent.top.document).modal('hide');
window.parent.postMessage('close', '*');
}关于dialog的使用还有一个问题，如果在一个iframe中打开窗口，遮罩层和dialog都会以iframe为基准，但有时候这样会显的窗口太小使用不方便，所以我们这里要再加一种方法，打开全局dialog，就是如果在iframe中打开，dialog要显示在iframe的顶级父级窗口中，这就需要我们对源码小小的改造下
//顶部打开移动dialog所属窗体
if(this.options.istop){
this.getModal().appendTo($(window.top.document.body));
} var $modal = this.getModal();
var $backdrop = $modal.data('bs.modal').$backdrop;
$modal.css('z-index', zIndexModal + (dialogCount - 1) * 20);
$backdrop.css('z-index', zIndexBackdrop + (dialogCount - 1) * 20);
//top打开调整这招位置
if(this.options.istop){
$backdrop.appendTo($(window.top.document.body));
}打开时将模态窗口整体移动至顶级窗口的body内容中去，模态窗口做相同操作就可以了，然后初始化时传入加入的参数
var dialogInstance = new BootstrapDialog({
istop:true,
onhidden:callback,
onshown:function () {
/* $("div[role='dialog']").appendTo($(window.top.document.body));
$("div[class^='modal-backdrop']").appendTo($(window.top.document.body));*/
}
});改造后的的源码js地址：
https://github.com/grassprogramming/yblog/blob/master/main/resources/static/plugins/bootstrap3-dialog/js/bootstrap-dialog.js
自己封装的dialog.js:
https://github.com/grassprogramming/yblog/blob/master/main/resources/static/common/dialog.js
注：
使用时引用jquery，bootstrap-dialog.js，bootstrap-dialog.css,dialog.js
提供一个调用示例：
OpenDialog("editdialog","编辑表结构","pages/dmp/tablestruct_list.html?tablecode="+row.rowguid,600,1200,afterClose);