基于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 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
JavaScript表单验证实现代码
May 22 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
微信小程序wxml列表渲染原理解析
Nov 27 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
基于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
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
js 文件引入实现代码
2010/04/23 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
js实现拖拽效果
2015/02/12 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
python实现事件驱动
2018/11/21 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
结构和类有什么异同
2012/07/16 面试题
市场营销专业自荐书
2014/06/10 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书