showModalDialog兼容性修改

showModalDialog兼容性修改

在打开窗口的方法中添加回调,进行非IE浏览器接收参数和关闭遮罩。

在弹出页面进行确定(页面操作完成)、关闭,页面自带关闭(菜单栏,或者快捷键)操作的回调。

需要引用的js

(function () {
    // "!+[1,]" IE浏览器判断
    //利用了IE解析数组和其他浏览器不同的漏洞。
    if (!(!+[1,])) {//非IE浏览器都进行window.open
        /**
         * 将showModalDialog转换为window.open
         * 调用入口处添加window.open()回调处理方法
         * 在子页面处理完成后将要返回的参数传递
         this.returnAction = function (result) {
            if (result != null) {
                useAppArray = result;
            }
         };
         this.returnClose=function(){
            closeZheZhao();
         };
         * 目标页面使用这种方式回调
         if (!(!+[1,])) {//非IE浏览器执行下面程序,进行open回调
            //window.OPEN使用的返回
            window.parent.opener.returnClose();
            window.parent.opener.returnAction(rlist);
            top.close();
         } else {
            //showModalDialog使用的返回
            window.returnValue = rlist;
            window.close();
         }
         //在具体的页面点击窗口x关闭时需要在弹出窗口的页面添加下面关闭事件
         window.onunload = function () { if (!(!+[1,]))window.parent.opener.returnClose(); }//窗口关闭时去掉遮罩效果
         window.onbeforeunload = function () { if (!(!+[1,]))window.parent.opener.returnClose(); }//窗口关闭时去掉遮罩效果
         *
         * @param url 必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
         * @param param 可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
         * @param modalDialogOption 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
         * @param targetWindow 转换后的window.open窗口name参数
         */
        window.showModalDialog = function (url, param, modalDialogOption, targetWindow) {
            if (openwindow != null && typeof (openwindow) != "undefined" && !openwindow.closed) { // 如果已经打开了窗口,则不再打开新的,而是让已打开的窗口获得焦点
                openwindow.focus();
                return;
            }
            window.onfocus = function () {
                if (openwindow != null && typeof (openwindow) != "undefined" && !openwindow.closed) {
                    openwindow.focus();
                    return;
                }
            };
            window.onclick = function () {
                if (openwindow != null && typeof (openwindow) != "undefined" && !openwindow.closed) {
                    openwindow.focus();
                    return;
                }
            };
            var option = '{"' + modalDialogOption.replace(/;/g, '","').replace(/=/g, ':').replace(/\:/g, '":"') + '"}';
            option = JSON.parse(option);
            //原showModalDialog的dialogWidth、dialogWidth使用的参数为纯数字,没有单位(默认为em),这里对其进行px参数转换,并稍微加大。
            //可根据实际情况修改
            var openOption = 'modal=yes,width=' + (parseInt(option.dialogWidth) * 17) + // parseInt() 将'100px'转化为100
                ',height=' + (parseInt(option.dialogHeight) * 17) + // parseInt()  将'100px'转化为100
                ',left=' + (window.screen.width - (parseInt(option.dialogWidth)) * 17) / 2 + // 水平居中
                ',top=' + (window.screen.height - 30 - (parseInt(option.dialogHeight)) * 17) / 2 + // 垂直居中
                ',location=no' +//是否显示地址字段
                ',menubar=no' +//是否显示菜单栏
                ',titlebar=no' +//是否显示标题栏
                ',toolbar=no' +//是否显示浏览器的工具栏
                ',resizable=' + (option.resizable || 'no') + // 是否可调整尺寸
                ',scrollbars=' + (option.scroll || 'no') + // 是否显示滚动条
                ',status=' + (option.status || 'no'); // 是否显示状态栏信息
            var modalDialogSimulationName = targetWindow || 'window.showModalDialog_Simulation'; // 定义弹出窗口的名字,避免重复弹窗。随机定义一个名字即可。
            openZheZhao();
            var openwindow = window.open(url, modalDialogSimulationName, openOption);
            openwindow.focus();
            /*bgObj.onclick = function () {
             alert("关闭弹出页面后本页面才可操作");
             }*/
        }
    } else {
        /**
         * 定义原生showModalDialog为_showModalDialog
         * 拦截处理dialogWidth、dialogHeight数值后再次调用_showModalDialog
         * 原程序使用dialogWidth、dialogHeight参数为em默认,现在转换为px
         * @type {*}
         * @private
         */
        Window.prototype._showModalDialog = window.showModalDialog;
        window.showModalDialog = function (url, param, modalDialogOption, targetWindow) {
            var option = '{"' + modalDialogOption.replace(/;/g, '","').replace(/=/g, ':').replace(/\:/g, '":"') + '"}';
            option = JSON.parse(option);
            if (option.dialogWidth.indexOf("px") != -1) {
                return this._showModalDialog(url, param, modalDialogOption, targetWindow);
            }
            option.dialogWidth = parseInt(option.dialogWidth) * 17;
            option.dialogHeight = parseInt(option.dialogHeight) * 17;
            var modalDialogOption2 = "";
            for (var key in option) {
                modalDialogOption2 += key + ":" + option[key];
                if (key == "dialogWidth" || key == "dialogHeight") {
                    modalDialogOption2 += "px;"
                } else {
                    modalDialogOption2 += ";"
                }
            }
            // console.log(modalDialogOption2);
            return this._showModalDialog(url, param, modalDialogOption2, targetWindow);
        }
    }
})();

/**
 * 添加遮罩
 */
function openZheZhao() {
    var zhezhao = top.document.createElement("div");
    zhezhao.setAttribute('id', 'zhezhao');
    top.document.body.appendChild(zhezhao);
    var zhezhao = top.document.getElementById("zhezhao");
    zhezhao.style.width = "100%";
    //zhezhao.style.height = top.document.body.scrollHeight+"px";
    zhezhao.style.height ="100%";
    zhezhao.style.top = "0";
    zhezhao.style.left = "0";
    zhezhao.style.backgroundColor = "#000000";
    zhezhao.style.position = "fixed";
    zhezhao.style.zIndex = "99999";
    zhezhao.style.opacity = "0.6";
    zhezhao.style.filter = "alpha(opacity=30)";
    zhezhao.onclick = function () {
        alert("关闭弹出页面后本页面才可操作");
    }
}
/**
 * 关闭遮罩
 */
function closeZheZhao() {
    // console.log("关闭遮罩")
    var zhezhao = top.document.getElementById("zhezhao");
    top.document.body.removeChild(zhezhao);
}


 上一篇
jq省市联动 jq省市联动
jq省市联动<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta con
2020-08-09
下一篇 
springHibernate整合异常 springHibernate整合异常
springHibernate整合异常no session found for current threadsave is not valid without active transaction将事物处理与sessionFactory分2
2020-08-09
  目录