父页面

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

}

window.open实现模式窗口(只弹出一个window.open)的更多相关文章

  1. ASP.NET查询页面设置form的action属性只弹出一个页面，并且每次将页面设置到最前

    原文:ASP.NET查询页面设置form的action属性只弹出一个页面,并且每次将页面设置到最前 背景 当数据量大.查询条件复杂,多样多的时候,我们可能需要单独做一个查询界面,当用户选择设置了相关的 ...

  2. selenium获取新页面标签页（只弹出一个新页面的切换）

    selenium获取新页面标签页(只弹出一个新页面的切换) windows = driver.current_window_handle #定位当前页面句柄 all_handles = driver. ...

  3. JS只弹出一个居中弹出窗口

    var newWindow;//定义一个窗口,有利于窗口间的通讯function makeNewWindow(url) {   if (!newWindow || newWindow.closed) ...

  4. 利用cookie实现“只弹出一次窗口”的JS代码

    弹出式窗口通常被用来做弹出广告(CPM),其实用弹出式窗口用来做消息通知也是最普遍而且是最有效的方法,但如果每次刷新页面特别是刷新首页都要弹出窗口的话,那绝对是让访问者厌烦的事情. 比如你将上面的脚本 ...

  5. window.open实现模式窗口

    看了些文章,实现模式窗口有两种方式.window.showModalDialog以及window.open. 一.方式介绍 window.open()支持环境: JavaScript1.0+/JScr ...

  6. 在Winform框架的多文档界面中实现双击子窗口单独弹出或拖出及拽回的处理

    在基于DevExpress的多文档窗口界面中,我们一般使用XtraTabbedMdiManager来管理多文档窗口的一些特性,如顶部菜单,页面的关闭按钮处理,以及一些特殊的设置,本篇随笔介绍这些特点, ...

  7. android在桌面弹出一个窗口

    android在桌面弹出一个窗口 遇到了这种需求,要和iPhone一样的效果. 下面是简单实现功能,优化和美化部分,有时间慢慢搞. 方法应该有不少吧,我用的是弹出一个activity,将这个activ ...

  8. 用MPLAB IDE编程时，软件总是弹出一个窗口提示： “the extended cpu mode configuration bit is enabled,but the program that was loaded was not built using extended cpu instructions. therefore,your code may not work properly

    用MPLAB IDE编程时,软件总是弹出一个窗口提示:"the extended cpu mode configuration bit is enabled,but the program ...

  9. 通过script src引入ElementUI时，使用语句：window.ELEMENT.MessageBox.alert(xxx) 调用弹出框

    通过script src引入ElementUI时,使用语句:window.ELEMENT.MessageBox.alert(xxx) 调用弹出框.

随机推荐

  1. 导入excle数据

    导入excle数据 1.if (File.Exists(strFileName)) // 当文件存在时             {                 m_fileName = strFi ...

  2. jq模糊匹配

    jq是一般程序员在前台开发的时候都会使用的技术,其中模糊匹配查询在动态添加标签的时候经常用到,这里我写出我经常用到的几个模糊匹配的方法.其中有:^(前缀).$(后缀).*(包含)例如有这样一段代码: ...

  3. Web自动化测试学习点总结

    "大不可量,深不可测"这是出自<韩非子·主道>的一段话.关于自动化测试也是如此,web系统开发完成,测试人员对页面进行测试,寻找bug.这个过程,需要摸索着前进. 什么 ...

  4. HTTP could not register URL http://+:86/. 设置VS默认以管理员权限打开

      在使用visual studio 2013启动self host webapi时候碰到下面的错误: 详细错误信息如下: HTTP could not register URL http://+:8 ...

  5. python绝技 — 嗅探FTP登录口令

    代码: #!/usr/bin/python #--*--coding=utf-8--*-- import optparse from scapy.all import * def ftpsniff(p ...

  6. PostgreSQL学习手册(常用数据类型)

    一.数值类型:     下面是PostgreSQL所支持的数值类型的列表和简单说明: 名字 存储空间 描述 范围 smallint 2 字节 小范围整数 -32768 到 +32767 integer ...

  7. 【1】Hover 效果收集

    各种 hover 效果  github repository>>  git 仓库 1. 背景图的 hover 效果 原页面>> githubSite>>

  8. 运用PhantomJS测试JavaScript

    我认为我不需要说服你,测试你的JavaScript代码是一个好主意.但是,测试需要DOM操作的JavaScript代码有时候确是繁琐的.这意味着你需要在浏览器中测试代码而不能使用终端,对吗?错了,事实 ...

  9. 给Unity3d添加一个漂亮的标题栏

    我们在做好一个小Unity3d APP,我们一般都会兴致勃勃的导出一个exe,尝试着玩我们的app.感觉还不错,有板有眼的了.然而事与愿违,我们APP里面的内容挺漂亮的,但是它的标题栏是windows ...

  10. CentOS7 安装 OpenSSL 1.0.1m 和 OpenSSH 6.8p1

    # 下载软件 wget http://zlib.net/zlib-1.2.8.tar.gz wget ftp://ftp.openssl.org/source/openssl-1.0.1m.tar.g ...