window.open实现模式窗口(只弹出一个window.open)

时间：2022-08-22 14:48:21

父页面

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <title>父窗口</title>

    <script src="../Scripts/openModal.js"></script><!--引用遮罩层JS-->

    <script language="javascript">

        window.onfocus = getFocus;

        window.onclick = getFocus;

        function getFocus() {

            if (typeof (window.childWindow) != "undefined") {//如果子窗口存在，将焦点转到子窗口

                window.childWindow.focus();

            }

        }

        function showChild() {

            EV_modeAlert();//弹出遮罩层

            window.childWindow = window.open("child.html", "child", "width=300px,height=110px,resizable=no,scroll=no,status=no");

            window.childWindow.focus();//子窗口获取焦点

        }

    </script>

</head>

<body>

    <input name="btn_show" type="button" value="显示子窗口" onclick="showChild()" />

</body>

</html>

子页面

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

    <script src="../Scripts/openModal.js"></script><!--引用遮罩层JS-->

    <title>子页面</title>

    <script language="javascript">

        window.onunload = function () { EV_closeAlert(); }//窗口关闭时去掉遮罩效果

    </script>

</head>

<body>

</body>

</html>

JS

var EV_MsgBox_ID = "EV_bgModeHideDiv";

//重要

//弹出对话窗口(msgID-要显示的div的id)

function EV_modeAlert() {

    //创建大大的背景框

    var hideDiv = document.createElement("div");

    hideDiv.id = EV_MsgBox_ID;

    hideDiv.style.display = "none";

    var bgObj = document.createElement("div");

    bgObj.setAttribute('id', 'EV_bgModeAlertDiv');

    document.body.appendChild(hideDiv);

    document.body.appendChild(bgObj);

    //背景框满窗口显示

    EV_Show_bgDiv();

    //把要显示的div居中显示

    EV_Show_msgDiv();

}

//关闭对话窗口

function EV_closeAlert() {

    var msgObj = window.opener.document.getElementById(EV_MsgBox_ID);

    var bgObj = window.opener.document.getElementById("EV_bgModeAlertDiv");

    msgObj.style.display = "none";

    window.opener.document.body.removeChild(bgObj);

    window.opener.document.body.removeChild(msgObj);

    EV_MsgBox_ID = "";

}

//把要显示的div居中显示

function EV_Show_msgDiv() {

    var msgObj = document.getElementById(EV_MsgBox_ID);

    msgObj.style.display = "block";

    var msgWidth = msgObj.scrollWidth;

    var msgHeight = msgObj.scrollHeight;

    var bgTop = EV_myScrollTop();

    var bgLeft = EV_myScrollLeft();

    var bgWidth = EV_myClientWidth();

    var bgHeight = EV_myClientHeight();

    var msgTop = bgTop + Math.round((bgHeight - msgHeight) / 2);

    var msgLeft = bgLeft + Math.round((bgWidth - msgWidth) / 2);

    msgObj.style.position = "absolute";

    msgObj.style.top = msgTop + "px";

    msgObj.style.left = msgLeft + "px";

    msgObj.style.zIndex = "10001";

}

//背景框满窗口显示

function EV_Show_bgDiv() {

    var bgObj = document.getElementById("EV_bgModeAlertDiv");

    var bgWidth = EV_myClientWidth();

    var bgHeight = EV_myClientHeight();

    var bgTop = EV_myScrollTop();

    var bgLeft = EV_myScrollLeft();

    bgObj.style.position = "absolute";

    bgObj.style.top = bgTop + "px";

    bgObj.style.left = bgLeft + "px";

    bgObj.style.width = bgWidth + "px";

    bgObj.style.height = bgHeight + "px";

    bgObj.style.zIndex = "10000";

    bgObj.style.background = "#777";

    bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60,finishOpacity=60);";

    bgObj.style.opacity = "0.6";

}

//网页被卷去的上高度

function EV_myScrollTop() {

    var n = window.pageYOffset

    || document.documentElement.scrollTop

    || document.body.scrollTop || 0;

    return n;

}

//网页被卷去的左宽度

function EV_myScrollLeft() {

    var n = window.pageXOffset

   || document.documentElement.scrollLeft

       || document.body.scrollLeft || 0;

    return n;

}

//网页可见区域宽

function EV_myClientWidth() {

    var n = document.documentElement.clientWidth

    || document.body.clientWidth || 0;

    return n;

}

//网页可见区域高

function EV_myClientHeight() {

    var n = document.documentElement.clientHeight

    || document.body.clientHeight || 0;

    return n;

}

相关文章