基于JavaScript如何制作遮罩层对话框
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如何制作遮罩层对话框 的相关知识，希望对大家有所帮助。
相关推荐
-
JS实现新浪微博效果带遮罩层的弹出框代码
本文实例讲述了JS实现新浪微博效果带遮罩层的弹出框代码.分享给大家供大家参考.具体如下: 这是一款新浪微博效果的弹出框,现成的JS代码,兼容IE6+,以及各主流浏览器.新浪微博弹出层并可拖拽,操作轻松舒适,符合用户的浏览习惯,将代码推荐给各位网友. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-sina-zzxg-dlg-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1
-
AngualrJS中每次$http请求时的一个遮罩层Directive
AngularJS是一款非常强大的前端MVC框架.在AngualrJS中使用$http每次向远程API发送请求,等待响应,这中间有些许的等待过程.如何优雅地处理这个等待过程呢? 如果我们在等待过程中弹出一个遮罩层,会是一个比较优雅的做法. 这就涉及到了对$http的请求响应进行拦截了.请求的时候,弹出一个遮罩层,收到响应的时候把遮罩层隐藏. 其实,$httpProvider已经为我们提供了一个$httpProvider.interceptors属性,我们只需要把自定义的拦截器放到该集合中就可以了
-
javascript实现的登陆遮罩效果汇总
javascript实现的登陆遮罩效果 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UT
-
JS实现常见的TAB、弹出层效果(TAB标签，斑马线，遮罩层等)
本文实例讲述了JS实现常见的TAB.弹出层效果.分享给大家供大家参考.具体如下: 这里演示tab活页夹(网页标签),斑马线,遮罩层.弹出层的简单实现,里面的JS文件,可下拉保存为JS代码调用即可,也可以拷贝在本网页中使用.这个小网页囊括了目前网上流行的风页标签.弹出层以及斑马线效果,很实用啦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tab-alert-bq-style-demo/ 具体代码如下: <!DOCTYPE html PU
-
基于JavaScript实现全屏透明遮罩div层锁屏效果
废话不多说了,直接给大家写js代码了,代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit
-
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
这个效果用的很频繁,经常都会有人问我这个问题,所以要把它写成文章.下次再有人问就直接把这篇文章的URL丢出去就好了.这个效果很简单所以我就不做太多说明了,具体的看看代码注释就会明白.下面就是全部代码,复制到HTML中就可以运行的. <!DOCTYPE html> <style> #mask { position:fixed;width:100%; top:0px;left:0px; _position:absolute; _top:expression(documentElemen
-
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
CSS+JavaScript 实现原理: 创建一个满屏的div,使用绝对定位,这样的话它就可以脱离文档流,对其他的元素不会产生影响,并且将其设置为半透明状态,当然这个透明度可以随便调的,同时创建一个login元素,它也使用绝对定位,并将其z-index属性值大于面屏的div,这个时候它就不会被满屏div遮盖.在默认状态下这两个div的display属性值是none.当点击相应的按钮可以更改他们的display属性值. <!DOCTYPE html> <html> <head&
-
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
一.去除滚动条方法 给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性 样式中需要对IE6.7及其它浏览器用hack辨别,这是因为当页面拉到下面时如果html或body被overflow:hidden,透明弹层下面的页面就会被部分正常隐藏,通过透明看到的一片的灰度,具体颜色跟平台及用户设置背景色有关. body或html去掉滚动条后,页面会有一个滚动条宽度/2的跳动!这个跳动对用户体验来十分不好,因此给body添加一下
-
JavaScript编写页面半透明遮罩效果的简单示例
半透明遮罩层效果基本上都是使用插件实现的,下面为大家分享下使用原生js实现半透明遮罩效果,感兴趣的朋友可以参考下哈,希望对你熟悉原生js有所帮助 <div > <h4><span>现在注册</span><span >关闭</span></h4> <p> <label> 用户名</label> <input type="text" class="myin
-
js制作带有遮罩弹出层实现登录注册表单特效代码分享
本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图: ----------------------查看效果 源码下载----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. jquery制作的带有遮罩弹出层实现登录注册等表单的特效源码,是一段实现了点击后在原始页面上弹出想用页面的代码. 为大家分享的js制作带有遮罩弹出层实现登录注册表单代码特效
-
js实现遮罩层划出效果是生成div而不是显示
同遮盖层划入一样,单纯的遮盖层划出的话算的上是非常简单了,但是在这里它却就不这么简单了,而且我前面还选了个比较麻烦的生成div,而不是显示存在的div,这里有那么几点需要特别注意: 1.遮盖层出现后,鼠标哪怕不动,也已经是在遮盖层上,已经不再给出的div区域了,所以注意监听的位置: 2.onmouseout和onmouseover都是瞬时触发的,这点很重要: 3.在实际应用中,已存在的div的显示比临时创建肯定要有效的多: 这样我还是上一下代码吧,其实之前的地方没怎么变,我只记录改变的地方,那就
-
js实现登陆遮罩效果的方法
本文实例讲述了js实现登陆遮罩效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="tex