JS 弹出模态窗口解决方案

浏览数：47 / 时间：2015年06月09日

最近在项目中使用弹出模态窗口，功能要求：

　　（1）模态窗口选择项目

　　（2）支持选择返回事件处理

在IE中有showModalDialog 方法，可以很好的解决该问题，但是在Chrome中和FF中就有问题了，它们不支持showModalDialog方法。因此需要采用不同的处理方法。

IE中的窗口打开函数option参数定义之间必须用分号分隔，Chrome是用逗号分隔，使用时需要注意这点。

var option = "";
    //居中显示，
    option = "dialogWidth=" + iWidth + "px;dialogHeight=" + iHeight + ‘px;dialogTop=‘ + iTop + ‘px;dialogLeft=‘ + iLeft + "px;center=yes;help=no;status=no;scroll=yes;resizable=yes";
    if (window.ActiveXObject) { //IE  
        option = "dialogWidth=" + iWidth + "px;dialogHeight=" + iHeight + ‘px;dialogTop=‘ + iTop + ‘px;dialogLeft=‘ + iLeft + "px;center=yes;help=no;status=no;scroll=yes;resizable=yes";
    }
    else {  //非IE  
        option = ‘height=‘ + iHeight + ‘,innerHeight=‘ + iHeight + ‘,width=‘ + iWidth + ‘,innerWidth=‘ + iWidth + ‘,top=‘ + iTop + ‘,left=‘ + iLeft+",help=no,status=no,scroll=yes,resizable=yes";
    }

第一：统一的核心方法

　　对于Chrome只能采用open方法弹出窗口，但是该方法不是模态的，因此代码不能实现等待窗口关闭后才返回值，只能在窗口关闭后调用一个回调函数来执行主页面的方法。

//定义回调函数变量
var CallBackFunc=undefined;
//传入回调函数名称
function SetCallBack(funcName)
{
    CallBackFunc=funcName;
}

//触发回调函数
function ShowOpenDialog()
{
    //Do something ....
    //调用主界面回调函数方法
    if (CallBackFuncName != undefined) {
        CallBackFuncName();
    }
}

第二：在主界面调用时

$(document).ready(function(){
    //设置回调函数
    SetCallBack(MainDo);
    //执行弹出窗口方法
    ShowOpenDialog(‘http://....‘);
});

function MainDo()
{
    alert(‘Do Result‘);
}

第三：弹出窗口返回值的处理

if(window.ActiveXObject){ //IE 
    window.returnValue =返回值;
    window.close();
}else{ //非IE 
    if(window.opener) { 
        window.opener.统一返回方法(返回值); 
    } 
    window.close(); 
}

完整统一的核心代码：

//定义回调函数变量
var CallBackFunc=undefined;
//传入回调函数名称
function SetCallBack(funcName)
{
    CallBackFunc=funcName;
}
//执行
function ShowOpenDialog(strUrl)
{
    var iHeight =400;
    var iWidth =500;
    var iTop = (window.screen.availHeight - 30 - iHeight) / 2;       //获得窗口的垂直位置;
    var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;        //获得窗口的水平位置;
    var option = "";
    //居中显示，
    option = "dialogWidth=" + iWidth + "px;dialogHeight=" + iHeight + ‘px;dialogTop=‘ + iTop + ‘px;dialogLeft=‘ + iLeft + "px;center=yes;help=no;status=no;scroll=yes;resizable=yes";
    if (window.ActiveXObject) { //IE  
        option = "dialogWidth=" + iWidth + "px;dialogHeight=" + iHeight + ‘px;dialogTop=‘ + iTop + ‘px;dialogLeft=‘ + iLeft + "px;center=yes;help=no;status=no;scroll=yes;resizable=yes";
    }
    else {  //非IE  
        option = ‘height=‘ + iHeight + ‘,innerHeight=‘ + iHeight + ‘,width=‘ + iWidth + ‘,innerWidth=‘ + iWidth + ‘,top=‘ + iTop + ‘,left=‘ + iLeft+",help=no,status=no,scroll=yes,resizable=yes";
    }

    var args = window.showModalDialog(strUrl, window, option);
    if (window.ActiveXObject) { //IE  
        var args = window.showModalDialog(strUrl, window, option);
        return SetSelectResult(args);
    } else {  //非IE  
        window.open(strUrl, window, option);
    }    
}

//核心返回方法
function SetSelectResult(resultValues) {
    //对resultValues 进行自定义处理
    //*******
    //调用主界面回调函数方法
    if (CallBackFuncName != undefined) {
        CallBackFuncName();
    }
    CallBackFuncName = undefined;
    return true;
}