父页面

<!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. rabbitmq在mac上安装

    1.安装brew 打开http://bash.sh  执行 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/ ...

  2. C#中WindowsForm常见控件的运用

    C#中WindowsForm常见控件的运用 -- 1.button(曹操,贡天子以令不臣): 属性;text:我们经常可以看见将按钮命名为“登入”,在其属性面板里面编辑text即可:如下图:      ...

  3. 适配器模式及C++实现

    适配器模式及C++实现 适配器模式 适配器模式是很好理解的模式了,生活中也非常常见,什么插头2口转3口,什么USB转PS2,这都算是适配器模式.说白了,就是如果有一些东西提供的接口你很像用,但是你手头 ...

  4. 从零开始学C++之重载 operator new 和 operator delete 实现一个简单内存泄漏跟踪器

    先来说下实现思路:可以实现一个Trace类,调用 operator new 的时候就将指向分配内存的指针.当前文件.当前行等信息添加进Trace 成员map容器内,在调用operator delete ...

  5. oracle保证读一致性原理

    35 这里也有讲解 1:undo segment的概念 当数据库进行修改的时候,需要把保存到以前的old的数据保存到一个地方,然后进行修改,用于保存old数据的segment 就是undo segme ...

  6. 开箱即用 - Memcache

    废话少说,先上代码C# memcache Demo memcache 是服务器缓存系统,以键值对方式保存数据到内存中,把对象序列化后,理论上可支持所有的数据类型. 使用情景:怎么用都可以,注意的是它只 ...

  7. 使用LR11录制手机脚本

    要使用Loadrunner11录制手机脚本,需要先搭建好测试环境:  能够正常使用的LoadRunner11:  安装一个LR11的补丁包,用于手机录制:  pc端和手机端的网络在同一个网段.  ...

  8. 2017 年不可错过的开发工具 Top 50

    想知道 2017 年有哪些值得关注的开发工具吗?StackShare 年度开发工具排行榜来啦! StackShare.io 是一个开发者工具及服务分享平台,致力于发现并分享开发者使用的开发工具.服务与 ...

  9. Java入门第二季第一章类和对象知识点

    Java 中的 static 使用之静态方法 1. 静态方法中可以直接调用同类中的静态成员,但不能直接调用非静态成员.如: 如果希望在静态方法中调用非静态变量,可以通过创建类的对象,然后通过对象来访问 ...

  10. json格式化和查看工具

    以前一直以来都觉得xml个可读性要比json的可读性好,后来使用了JSON Viewer这个小工具之后,发现自己错了.之前认为json的可读性差,完全是因为没有很好的查看工具.JSON Viewer这 ...