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);