基于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 相关文章推荐
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
js回调函数原理与用法案例分析
Mar 04 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
基于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
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
python装饰器深入学习
2018/04/06 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
tensorflow的计算图总结
2020/01/12 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
python中什么是面向对象
2020/06/11 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
会计电算化专业个人的自我评价
2013/11/24 职场文书
门店业绩提升方案
2014/06/08 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
学校开学标语
2014/10/06 职场文书
党员发展大会主持词
2015/07/03 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python