//本文支持js在线工具测试、转载请注明出处。

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>UntitledDocument</title>
<script>
function openDiv(newDivID)
{
var newMaskID = "mask"; //遮罩层id
var newMaskWidth =document.body.scrollWidth;//遮罩层宽度
var newMaskHeight =document.body.scrollHeight;//遮罩层高度
//mask遮罩层
var newMask = document.createElement("div");//创建遮罩层
newMask.id = newMaskID;//设置遮罩层id
newMask.style.position = "absolute";//遮罩层位置
newMask.style.zIndex = "1";//遮罩层zIndex
newMask.style.width = newMaskWidth + "px";//设置遮罩层宽度
newMask.style.height = newMaskHeight + "px";//设置遮罩层高度
newMask.style.top = "0px";//设置遮罩层于上边距离
newMask.style.left = "0px";//设置遮罩层左边距离
newMask.style.background = "gray";//#33393C//遮罩层背景色
newMask.style.filter = "alpha(opacity=40)";//遮罩层透明度IE
newMask.style.opacity = "0.40";//遮罩层透明度FF
document.body.appendChild(newMask);//遮罩层添加到DOM中

window.open('http://www.baidu.com','_blank','width=500,height=260,menubar=no,toolbar=no');　　//弹出子页面，具体自用自改

//弹出层滚动居中
function newDivCenter()
{
newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2
- newDivHeight/2) + "px";
newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2
- newDivWidth/2) + "px";
}
if(document.all)//处理滚动事件，使弹出层始终居中
{
window.attachEvent("onscroll",newDivCenter);
}
else
{
window.addEventListener('scroll',newDivCenter,false);
}

//关闭新图层和mask遮罩层

var newA = document.createElement("span");
newA.href = "#";
newA.style.position = "absolute";//span位置
newA.style.left=350+ "px";
newA.innerHTML = "Close";
newA.onclick = function()//处理关闭事件
{
if(document.all)
{
window.detachEvent("onscroll",newDivCenter);
}
else
{
window.removeEventListener('scroll',newDivCenter,false);
}
document.body.removeChild(newMask);//移除遮罩层
document.body.removeChild(newDiv);////移除弹出框
return false;
}
newDiv.appendChild(newA);//添加关闭span
}
</script>
</head>

<BODY>
<a onclick="openDiv('newDiv');" style="cursor:pointer">点我点我</a>
<br>
username:<input type="text" name="uname"/><br>
u p w d:<input type="password" name="upwd"/>
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<a onclick="openDiv('newDiv');" style="cursor:pointer">点我点我</a>
</BODY>
</html>

出处：http://blog.csdn.net/xuexiaodong009/article/details/6605417

参考文档：http://blog.csdn.net/alex197963/article/details/4456174

纯js制作遮罩层对话框 -- g皓皓的更多相关文章

  1. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  2. 使用CSS3的box-shadow实现双透明遮罩层对话框

    box-shadow介绍 在我之前的一篇文章<从天猫和支付宝身上学习opcity与rgba>中,介绍了实现双透明遮罩层效果的两种方法,分别是opacity和rgba.他们需要分别依赖于不同 ...

  3. js添加遮罩层

    直接用代码来说明 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MaskT ...

  4. js 带遮罩层的弹出层

    最近有个小伙伴问我关于mui的带遮罩层的弹出层,我给他发了个相关demo,但是因为他是新手的原因没有看懂,所以我写了一个单纯的原生的带遮罩层的弹出层dome.写这篇微博希望可以帮到需要的小伙伴. &l ...

  5. js特效遮罩层（弹出层）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  6. JS实现遮罩层

    /* * 显示loading遮罩层 */ function loading() { var mask_bg = document.createElement("div"); mas ...

  7. [前端 3]纯Js制作俄罗斯方块游戏

    导读:在别人文章里看到了,然后写了一遍.结果出错了,然后调出来了,然后理解了一下,加了点注释,有一些想法.忘了在 哪一篇上面看的了,就贴不出来链接地址.原谅.呃,真没自己的东西,权当练打字了吧.其实, ...

  8. HTML+纯JS制作音乐播放器

    该篇文章会教你通过JavaScript制作一个简单的音乐播放器.包括播放.暂停.上一曲和下一曲. 阅读本文章你需要对HTML.CSS和Javascript有基本的了解. 话不多说,先上图. emmm. ...

  9. [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第3讲(逻辑方法的实现)

    整体展示: 上一讲实现了诸多对象,这次我们就需要实现许多逻辑方法,如控制飞机移动,判断子弹击中敌机,敌机与英雄飞机相撞等等.并且我们在实现这些功能的时候需要计时器去调用这些方法.setInterval ...

随机推荐

  1. Linux企业级开发技术（3）——epoll企业级开发之epoll模型

    EPOLL事件有两种模型: Edge Triggered (ET)  边缘触发 只有数据到来,才触发,不管缓存区中是否还有数据. Level Triggered (LT)  水平触发 只要有数据都会触 ...

  2. 【宽搜】ECNA 2015 E Squawk Virus (Codeforces GYM 100825)

    题目链接: http://codeforces.com/gym/100825 题目大意: N个点M条无向边,(N<=100,M<=N(N-1)/2),起始感染源S,时间T(T<10) ...

  3. 使用vs2010编译 Python \ SIP \ PyQt4

    (1)先使用vs2010编译 Python http://www.cnblogs.com/fortwo/archive/2013/04/16/3023871.html 注意,若编译的为debug版的P ...

  4. Fill-倒水问题(Uva-10603-隐式图路径寻找问题)

    原题:https://uva.onlinejudge.org/external/106/10603.pdf 有三个没有刻度的杯子,它们的容量分别是a, b, c, 最初只有c中的杯子装满水,其他的被子 ...

  5. hdu 1698 线段树成段更新

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1698 #include <cstdio> #include <cmath> # ...

  6. jxl对excel删除行

    简单记录下: package com.pingan; import java.io.File; import java.util.regex.Matcher; import java.util.reg ...

  7. Python开发—Ajax系列

    概述 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作需要 ...

  8. POI操作文档内容

    一. POI简介 Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. 二. HSSF概况 HSSF 是 ...

  9. Python入门基础教程(儿童版) [分享一本入门级教程]

    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1. 推荐书名 No Starch--Python for ...

  10. Android监听ScrollView滑动到顶端和底部

    Android监听ScrollView滑动到顶端和底部     package cn.testscrollview; import android.os.Bundle; import android. ...