JS 弹出模态窗口解决方案

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

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

}