父页面

<!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. C#基础原理拾遗——引用类型的值传递和引用传递

    C#基础原理拾遗——引用类型的值传递和引用传递 以前写博客不深动,只搭个架子,像做笔记,没有自己的思考,也没什么人来看.这个毛病得改,就从这一篇开始… 最近准备面试,深感基础之重要,奈何我不是计算机科 ...

  2. [Android开发常见问题-12] Android开发中debug.keystore如何使用。

    有些团度在开发较大的项目的时候会用到debug.keystore这种debug签名,那么这个东西怎么用呢?之前在导出签名包的时候只需要android tools -> export signed ...

  3. linux netstat 命令详解

    linux netstat 命令详解 1.功能与说明 netstat 用于显示linux中各种网络相关信息.如网络链接 路由表  接口状态链接 多播成员等等. 2.参数含义介绍 -a (all)显示所 ...

  4. 调试PostSharp DEMO 遇到的问题

    我今天在WIN7下的VS2010.VS2012调试PostSharp例子程序,下载的是PostSharp1.5版本,但是就是不进断点啊,我想了想这是怎么回事啊,于是我更换了2.0的再进行调试具然好使了 ...

  5. 错排-HDU 2049 递推的应用

    当n个编号元素放在n个编号位置,元素编号与位置编号各不对应的方法数用M(n)表示,那么M(n-1)就表示n-1个编号元素放在n-1个编号位置,各不对应的方法数,其它类推. 第一步,把第n个元素放在一个 ...

  6. JS 处理十六进制颜色渐变算法-输入颜色，输出渐变rgb数组

    html颜色有几种表示方式: 英文单词颜色值:background-color:Blue:十六进制颜色值:background-color:#FFFFFF:  RGB颜色值三元数字:backgroun ...

  7. CSS倒影

    前面的话   CSS倒影目前只有chrome和safari浏览器支持,且需要添加-webkit-前缀.本文将详细介绍CSS倒影box-reflect 语法 -webkit-box-reflect 初始 ...

  8. 构建jenkins

    一.Jenkins简介:    jenkins,之前叫做Hudson,是基于Java开发的一种持续集成工具,用户监控秩序重复的工作,包括: 1>持续的软件版本发布测试项目. 2>监控外部调 ...

  9. servlet笔记

    开发servlet有三种方法: (1)    实现 Servlet接口 (2)    通过继承 GenericServlet (3)    通过继承 HttpServlet get提交和post提交的 ...

  10. Nuget 学习三

    后期管理: 登录 nuget 官网 https://www.nuget.org/ 可以搜索到自己的包: 点击进入,可进一步操作 如果你需要给自己的类型新增其他功能,或者修改之前的bug(反正就是修改代 ...