//本文支持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. BZOJ 1072 [SCOI2007]排列perm

    1072: [SCOI2007]排列perm Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1268  Solved: 782[Submit][Sta ...

  2. -_-#【jQuery插件】Colorpicker 颜色选择器

    Spectrum - The No Hassle jQuery Colorpicker (jQuery 插件) Color Picker jQuery plugins (jQuery 插件) colo ...

  3. ♫【RequireJS】grunt-contrib-requirejs

    gruntjs / grunt-contrib-requirejs 使用r.js优化require.js项目 define("b",[],function(){return fun ...

  4. 贪心(数据结构)：COGS 468. [NOI2010]超级钢琴

    ★★★☆   输入文件:piano.in   输出文件:piano.out   简单对比 时间限制:2 s   内存限制:512 MB 超级钢琴 [问题描述] 小Z是一个小有名气的钢琴家,最近C博士送 ...

  5. 后缀数组：SPOJ SUBST1 - New Distinct Substrings

    Given a string, we need to find the total number of its distinct substrings. Input T- number of test ...

  6. 【链表】【模拟】Codeforces 706E Working routine

    题目链接: http://codeforces.com/problemset/problem/706/E 题目大意: 给一个N*M的矩阵,Q个操作,每次把两个同样大小的子矩阵交换,子矩阵左上角坐标分别 ...

  7. iOS: 关于Certificate、Provisioning Profile、App ID的介绍及其之间的关系

    刚接触iOS开发的人难免会对苹果的各种证书.配置文件等不甚了解,可能你按照网上的教程一步一步的成功申请了真机调试,但是还是对其中的缘由一知半解.这篇文章就对Certificate.Provisioni ...

  8. Nodejs in Visual Studio Code 13.构建单页应用Scrat示例挖一挖

    1.开始 Scrat作者说要搞个很碉堡的示例,果然就搞出来了,如果要学习并使用Scrat,可以从官方示例开始,简直太方便了. 2.Scrat示例 目录 component_modules : 公共组件 ...

  9. python 解析 配置文件

    资料: https://docs.python.org/3/library/configparser.html 环境 python 3.4.4 RawConfigParser方式 example.cf ...

  10. 遭遇多线程bug (1)

    某些用户,机器重启后,到第三方服务器的连接起不来,而到我们自己服务器的连接就没事. 如果连接由于网络或其他原因fail掉,过一定时间后应该会重新尝试建立连接的. 测试组做初步调查,他们能在本地环境复现 ...