JavaScript弹出层效果的实现方法

1. var docEle = function() {

2. return document.getElementById(arguments[0]) || false;

3. }

4. function openNewDiv(_id) {

5. var m = "mask";

6. if (docEle(_id)) document.removeChild(docEle(_id));

7. if (docEle(m)) document.removeChild(docEle(m));

8. // 新激活图层

9. var newDiv = document.createElement("div");

10. newDiv.id = _id;

11. newDiv.style.position = "absolute";

12. newDiv.style.zIndex = "9999";

13. newDiv.style.width = "350px";

14. newDiv.style.height = "auto";

15. newDiv.style.top = "450px";

16. newDiv.style.left = (parseInt(document.body.scrollWidth) - 300) / 2 + "px"; // 屏幕居中

17. newDiv.style.background = "url(http://book8249.isoshu.com/image/images_cn/review/bg_00.jpg)";

18. newDiv.style.border = "1px solid #666666";

19. newDiv.style.padding = "5px";

20. newDiv.innerHTML = "这个地方放弹出层的内容";

21. document.body.appendChild(newDiv);

22. // mask图层

23. var newMask = document.createElement("div");

24. newMask.id = m;

25. newMask.style.position = "absolute";

26. newMask.style.zIndex = "1";

27. newMask.style.width = document.body.scrollWidth + "px";

28. newMask.style.height = document.body.scrollHeight + "px";

29. newMask.style.top = "0px";

30. newMask.style.left = "0px";

31. //newMask.style.background = /"#000/";

32. newMask.style.filter = "alpha(opacity=40)";

33. newMask.style.opacity = "0.40";

34. document.body.appendChild(newMask);

35. // 关闭mask和新图层

36. var newA = document.createElement("a");

37. newA.href = "#";

38. newA.innerHTML = "<div style='width:auto; float:right; margin-top:-1.2em;cursor:hand; color:#383838; text-decoration:none;'>[关闭窗口]</div>";

39. newA.onclick = function() {

40. document.body.removeChild(docEle(_id));

41. document.body.removeChild(docEle(m));

42. return false;

43. }

44. newDiv.appendChild(newA);

45. }

46. //调用的时候：onclick="openNewDiv('newDiv');return false;"