父页面

<!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)的更多相关文章

ASP.NET查询页面设置form的action属性只弹出一个页面，并且每次将页面设置到最前
原文:ASP.NET查询页面设置form的action属性只弹出一个页面,并且每次将页面设置到最前背景当数据量大.查询条件复杂,多样多的时候,我们可能需要单独做一个查询界面,当用户选择设置了相关的 ...
selenium获取新页面标签页（只弹出一个新页面的切换）
selenium获取新页面标签页(只弹出一个新页面的切换) windows = driver.current_window_handle #定位当前页面句柄 all_handles = driver. ...
JS只弹出一个居中弹出窗口
var newWindow;//定义一个窗口,有利于窗口间的通讯function makeNewWindow(url) { if (!newWindow || newWindow.closed) ...
利用cookie实现“只弹出一次窗口”的JS代码
弹出式窗口通常被用来做弹出广告(CPM),其实用弹出式窗口用来做消息通知也是最普遍而且是最有效的方法,但如果每次刷新页面特别是刷新首页都要弹出窗口的话,那绝对是让访问者厌烦的事情. 比如你将上面的脚本 ...
window.open实现模式窗口
看了些文章,实现模式窗口有两种方式.window.showModalDialog以及window.open. 一.方式介绍 window.open()支持环境: JavaScript1.0+/JScr ...
在Winform框架的多文档界面中实现双击子窗口单独弹出或拖出及拽回的处理
在基于DevExpress的多文档窗口界面中,我们一般使用XtraTabbedMdiManager来管理多文档窗口的一些特性,如顶部菜单,页面的关闭按钮处理,以及一些特殊的设置,本篇随笔介绍这些特点, ...
android在桌面弹出一个窗口
android在桌面弹出一个窗口遇到了这种需求,要和iPhone一样的效果. 下面是简单实现功能,优化和美化部分,有时间慢慢搞. 方法应该有不少吧,我用的是弹出一个activity,将这个activ ...
用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 ...
通过script src引入ElementUI时，使用语句：window.ELEMENT.MessageBox.alert(xxx) 调用弹出框
通过script src引入ElementUI时,使用语句:window.ELEMENT.MessageBox.alert(xxx) 调用弹出框.

随机推荐

大数据应用日志采集之Scribe演示实例完全解析
大数据应用日志采集之Scribe演示实例完全解析引子: Scribe是Facebook开源的日志收集系统,在Facebook内部已经得到大量的应用.它能够从各种日志源上收集日志,存储到一个中央存储系 ...
JAVA-读取文件部分内容计算HASH值
对于一些大文件,有时会需要计算部分内容的Hash,下面的函数计算了文件头尾各1M,中间跳跃100M取10K 以及文件大小的Hash值 public static String CalHash(Str ...
MySQL 的 phpmyadmin上传大小限制（转）以及 MySQL server has gone away 的解决办法
phpmyadmin上传大小限制原帖地址:http://www.hmidc.com/home/news/?13914.html 时间:2011-6-21 11:17:57 作者:红帽之家来源: ...
linux下安装NPM管理工具
根据”挖一下“开发需要,选择nodejs实现异步IO,目的是为了解决服务器卡死导致无法处理后续的http请求.看了花瓣的架构视频讲座,才决定这么做的,挺有道理的. 安装nodejs很顺利,下载源码包, ...
CloudFoundry虚拟机实例配置DNS
使用Bosh成功部署CloudFoundry后,在OpenStack上启了一个实例作为DNS服务器专用,配置域名mycloud.com解析到CF API接口的IP:10.68.19.134,然后使用C ...
thinkpad x230i U盘启动
现在的thinkpad的笔记本真麻烦,设置个U盘启动都不好使,网上找了好多都不管用,后来打电话问的售后电话才搞定,具体步骤如下: 按F1进bios的 [Security]中最下面Secure Boot ...
ACM第二题生理周期
人生来就有三个生理周期,分别为体力.感情和智力周期,它们的周期长度为23天.28天和33天.每一个周期中有一天是高峰.在高峰这天,人会在相应的方面表现出色.例如,智力周期的高峰,人会思维敏捷,精力容易 ...
C++ unordered_map 在key为string类型和char*类型时测试时间性能差异
测试系统liunx centos6.5 代码如下 #include <string.h> #include <sstream> #include <list> #i ...
C语言：SQLITE3的学习
Sqlite基础学习一.sqlite的概念 SQLite是一款轻型数据库,是遵守ACID的关系型数据库管理系统,由C语言开发设计.Sqlite的设计目标着眼于嵌入式领域,所以具有占用系统资源低和处理 ...
dev gridcontrol把event事件转换成命令
可以通过继承gridcontrol的形式来实现定义DataGridDoubleClickCommand依赖属性 class MyGridControl : GridControl { ...

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

父页面

子页面

JS

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

随机推荐

热门专题