基于JavaScript如何制作遮罩层对话框


Posted in Javascript onJanuary 26, 2016

1.遮罩层其实就是一个覆盖全界面的半透明的DIV,并处理zIndex使他浮于其他元素之上,是用户不能点击下边的元素,或者说点击没有反应。

2.在遮罩层上方在弹出一个层,由于遮罩层挡住了其他所有元素,用户只能点击弹出层,制造出模式窗口的假象。

废话不多说了,直接给大家贴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>

以上所述是小编给大家介绍的基于JavaScript如何制作遮罩层对话框 的相关知识,希望对大家有所帮助。

Javascript 相关文章推荐
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
vue实现循环滚动列表
Jun 30 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 #Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 #Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 #Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 #Javascript
js实现的页面矩阵图形变换特效
Jan 26 #Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 #Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 #Javascript
You might like
几个php应用技巧
2008/03/27 PHP
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
python动态网页批量爬取
2016/02/14 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
财经学院自荐信范文
2014/02/02 职场文书
红色故事演讲稿
2014/05/22 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
Python读取和写入Excel数据
2022/04/20 Python