JavaScript弹出层效果的实现方法

 

1.  1. var docEle = function() {
2.    2. return document.getElementById(arguments[0]) || false;
3.    3. }
4.    4. function openNewDiv(_id) {
5.    5. var m = "mask";
6.    6. if (docEle(_id)) document.removeChild(docEle(_id));
7.    7. if (docEle(m)) document.removeChild(docEle(m));
8.    8. // 新激活图层
9.    9. var newDiv = document.createElement("div");
10.   10. newDiv.id = _id;
11.   11. newDiv.style.position = "absolute";
12.   12. newDiv.style.zIndex = "9999";
13.   13. newDiv.style.width = "350px";
14.   14. newDiv.style.height = "auto";
15.   15. newDiv.style.top = "450px";
16.   16. newDiv.style.left = (parseInt(document.body.scrollWidth) - 300) / 2 + "px"; // 屏幕居中
17.   17. newDiv.style.background = "url(http://book8249.isoshu.com/image/images_cn/review/bg_00.jpg)";
18.   18. newDiv.style.border = "1px solid #666666";
19.   19. newDiv.style.padding = "5px";
20.   20. newDiv.innerHTML = "这个地方放弹出层的内容";
21.   21. document.body.appendChild(newDiv);
22.   22. // mask图层
23.   23. var newMask = document.createElement("div");
24.   24. newMask.id = m;
25.   25. newMask.style.position = "absolute";
26.   26. newMask.style.zIndex = "1";
27.   27. newMask.style.width = document.body.scrollWidth + "px";
28.   28. newMask.style.height = document.body.scrollHeight + "px";
29.   29. newMask.style.top = "0px";
30.   30. newMask.style.left = "0px";
31.   31. //newMask.style.background = /"#000/";
32.   32. newMask.style.filter = "alpha(opacity=40)";
33.   33. newMask.style.opacity = "0.40";
34.   34. document.body.appendChild(newMask);
35.   35. // 关闭mask和新图层
36.   36. var newA = document.createElement("a");
37.   37. newA.href = "#";
38.   38. newA.innerHTML = "<div style=&apos;width:auto; float:right; margin-top:-1.2em;cursor:hand; color:#383838; text-decoration:none;&apos;>[关闭窗口]</div>";
39.   39. newA.onclick = function() {
40.   40.   document.body.removeChild(docEle(_id));
41.   41.   document.body.removeChild(docEle(m));
42.   42.   return false;
43.   43. }
44.   44. newDiv.appendChild(newA);
45.   45. }
46.   46. //调用的时候：οnclick="openNewDiv(&apos;newDiv&apos;);return false;"