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($(''));//打开窗口页面增加接受消息监听，在关闭事件后传递消息通知父级页面关闭dialogwindow.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);

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！