zoukankan html css js c++ java

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

父页面

<!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;
}

查看全文

相关阅读:
docker-compose.yml(2)
docker-compose.yml(3)
docker-compose.yml(4)
生产者&消费者.py
工作机制.py
2.5 webpack 进阶
 2.3 Gulp
2.4 webpack + gulp 构建完整前端工作流
 2.2 webpack
2.1 前端工程化概述

原文地址：https://www.cnblogs.com/jlove/p/4669984.html