JavaScript弹出层和背景变暗代码实现

开发 前端
本文向大家简单介绍一下JavaScript弹出层和背景变暗的实现方法,相信通过本文的介绍你对JavaScript有更加深刻的认识。

你对JavaScript弹出层和背景变暗的实现方法是否了解,这里和大家分享一下其实现代码,希望对你的学习有所帮助。

JavaScript弹出层和背景变暗

JavaScript弹出层,背景变暗,代码不算多,根据你的需要调整一下,这里只是实现了基础的思路,美化不是太好。

代码如下:

  1. <title>JavaScript弹出层,背景变暗</title> 
  2. <script> 
  3. vardocEle=function(){  
  4. returndocument.getElementById(arguments[0])||false;  
  5. }  
  6. functionopenNewDiv(_id){  
  7. varm="mask";  
  8. if(docEle(_id))document.removeChild(docEle(_id));  
  9. if(docEle(m))document.removeChild(docEle(m));  
  10. //www.codefans.net新激活图层  
  11. varnewDiv=document.createElement("div");  
  12. newDiv.id=_id;  
  13. newDiv.style.position="absolute";  
  14. newDiv.style.zIndex="9999";  
  15. newDiv.style.width="200px";  
  16. newDiv.style.height="300px";  
  17. newDiv.style.top="100px";  
  18. newDiv.style.left=  
  19. (parseInt(document.body.scrollWidth)-300)/2+"px";  
  20. //屏幕居中  
  21. newDiv.style.background="EEEEEE";  
  22. newDiv.style.border="1pxsolid#0066cc";  
  23. newDiv.style.padding="5px";  
  24. newDiv.innerHTML="新激活图层内容";  
  25. document.body.appendChild(newDiv);  
  26. //mask图层  
  27. varnewMask=document.createElement("div");  
  28. newMask.id=m;  
  29. newMask.style.position="absolute";  
  30. newMask.style.zIndex="1";  
  31. newMask.style.width=document.body.scrollWidth+"px";  
  32. newMask.style.height=document.body.scrollHeight+"px";  
  33. newMask.style.top="0px";  
  34. newMask.style.left="0px";  
  35. newMask.style.background="#000";  
  36. newMask.style.filter="alpha(opacity=40)";  
  37. newMask.style.opacity="0.40";  
  38. document.body.appendChild(newMask);  
  39. //docutmentwww.codefans.net  
  40. //关闭mask和新图层  
  41. varnewA=document.createElement("a");  
  42. newA.href="#";  
  43. newA.innerHTML="关闭激活层";  
  44. newA.onclick=function(){  
  45. document.body.removeChild(docEle(_id));  
  46. document.body.removeChild(docEle(m));  
  47. returnfalse;  
  48. }  
  49. newDiv.appendChild(newA);  
  50. }  
  51. </script> 
  52. <ahrefahref="#"onclick="openNewDiv(newDiv);returnfalse;"> 
  53. 弹出新层</a> 
  54.  

【编辑推荐】

  1. 解析Javascript对select下拉列表操作
  2. JS中Array数组的三大属性用法揭秘
  3. pro盘点JavaScript中Function三大用途
  4. Javascript数组创建及其常见操作
  5. JavaScript调试工具解决IE6等多版本共存问题 

 

 

责任编辑:佚名 来源: opent.cn
相关推荐

2010-08-30 10:09:07

JavaScriptDIV

2011-03-30 14:33:57

jQueryJavaScript

2010-09-07 09:30:25

DIV弹出jQuery

2009-06-12 18:53:35

Django控制层Django表现层

2010-08-26 15:59:38

DIV圆角

2012-06-07 15:14:52

jQuery

2009-06-26 16:12:08

ThickboxjQuery

2019-05-29 17:45:32

JavaScript算法思路代码实现

2017-03-22 14:23:58

Java HashMa实现原理

2015-07-23 15:15:06

动态弹出

2009-07-01 14:23:46

JavaScript异

2010-09-07 09:18:16

DIV弹出窗口

2011-07-22 17:24:46

iPhone 视图

2010-09-28 12:59:45

JavaScriptDOM

2020-03-28 14:57:29

JavaScrip代码函数

2010-09-07 09:08:03

DIV弹出层

2009-06-26 16:19:32

Hibernate实现

2017-03-09 18:00:30

JavaScript代码

2009-06-30 15:05:52

JSP数据JavaScript数

2016-05-06 10:02:33

CSSJavaScript工具
点赞
收藏

51CTO技术栈公众号