//本文支持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. Ubuntu下SSH设置

    网上有很多介绍在Ubuntu下开启SSH服务的文章,但大多数介绍的方法测试后都不太理想,均不能实现远程登录到Ubuntu上,最后分析原因是都没有真正开启ssh-server服务.最终成功的方法如下: ...

  2. Sort Colors —— LeetCode

    Given an array with n objects colored red, white or blue, sort them so that objects of the same colo ...

  3. Shapely介绍及用户手册

    本文主要是基于shapely官方文档翻译而成 shapely主要是在笛卡尔平面对几何对象进行操作和分析. 性能 Shapely中所有的操作都是使用GEOS库.GEOS是用C++写的,也被用在许多应用程 ...

  4. Apache-Tika解析XML文档

    通常在使用爬虫时,爬取到网上的文章都是各式各样的格式处理起来比较麻烦,这里我们使用Apache-Tika来处理XML格式的文章,如下: package com.mengyao.tika.app; im ...

  5. 如何高性能的给UIImageView加个圆角

    文/natewang(简书作者)原文链接:http://www.jianshu.com/p/268f3839d2e6著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 其实你只需要的是圆角 ...

  6. 怎样把redis编译为库，挪为己用？

    其实这是个伪命题.因为只要正常编译redis,那么在 /deps/hiredis/ 目录下就会生成动态库文件 libhiredis.so. 为了便于学习redis源码,编写一些测试程序,并进行单步跟踪 ...

  7. Python算法之---冒泡，选择，插入排序算法

    ''' Created on 2013-8-23    @author: codegeek '''    def bubble_sort(seq):     for i in range(len(se ...

  8. php laravel mysql无法连接处理方案（linux服务器配置）

    阿里云 Ubuntu 14.*上搭建laravel环境 之前做项目时都是搭建在自己的服务器上,可是自己的那个服务器是很久以前一点点配置好的,也是各种百度,该忘记的都忘了, 所以前一段在客户的阿里云Ub ...

  9. C#中接口和抽象类

    1抽象类 (1) 抽象方法只作声明,而不包含实现,可以看成是没有实现体的虚方法 (2) 抽象类不能被实例化 (3) 抽象类可以但不是必须有抽象属性和抽象方法,但是一旦有了抽象方法,就一定要把这个类声明 ...

  10. oracle中的function 、procedure、packages、package bodies比较

    1  function和procedure的区别 1).可以理解函数是存储过程的一种 2).函数可以没有参数,但是一定需要一个返回值,存储过程可以没有参数,不需要返回值 3).函数return返回值没 ...