父頁面

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 window.open實現模式窗口 window.open()彈出窗口被攔截 js彈出window.open窗口 window.open彈出窗口調用controller 關於window.open彈出窗口被阻止的問題 window.open()彈出窗口參數說明及居中設置 window.open 與 iframe window.open全屏設置window.open窗口頁面title window.open()打開新窗口教程