js遮罩层

1. <script> 
2. // 隐藏 select 
3. function selecthidden(){ 
4.  var  input_elements=document.getElementsByTagName("select"); 
5.  var  theLength=input_elements.length; 
6.  for(i=0;i<theLength;i++) 
7.  { 
8.   input_elements[i].style.visibility="hidden"; 
9.   } 
10. } 
11. // 显示 select 
12. function selectshow(){ 
13.  var  input_elements=document.getElementsByTagName("select"); 
14.  var  theLength=input_elements.length; 
15.  for(i=0;i<theLength;i++) 
16.  { 
17.   input_elements[i].style.visibility=""; 
18.   } 
19. } 
20. //  创建一个半透明的遮罩层 
21. function createBlurDiv(){ 
22. var objScreen = document.createElement("div"); 
23. var oS = objScreen.style; 
24.  objScreen.id = "ScreenOver"; 
25.  oS.display = "block"; 
26.  oS.top = oS.left = oS.margin = oS.padding = "0px"; 
27.  if (document.body.clientHeight) 
28.  { 
29.   var wh = document.body.clientHeight + "px"; 
30.  }else if (window.innerHeight){ 
31.    var wh = window.innerHeight + "px"; 
32.   }else{ 
33.    var wh = "100%"; 
34.   } 
35. oS.width = "100%"; 
36. oS.height = wh; 
37. oS.position = "absolute"; 
38. oS.zIndex = "3"; 
39. oS.background = "#cccccc"; 
40. oS.filter = "alpha(opacity=40)"; 
41. oS.opacity = 40/100; 
42. oS.MozOpacity = 40/100; 
43. document.body.appendChild(objScreen); 
44. selecthidden(); 
45. } 
46.  
47. //移除遮罩层 
48. function removeBlurDiv(){ 
49.  var ScreenOver = document.getElementById("ScreenOver"); 
50.  document.body.removeChild(ScreenOver); 
51.  selectshow(); 
52. } 
53.  
54. // 在遮罩层上面出现一个div层 
55. function divBlock(divname){ 
56.  var oneDiv = document.getElementById(divname); 
57.   oneDiv.style.display="block";  
58.  } 
59.   
60. // 把指定的层消失掉 
61. function divNone(divname){ 
62.  var oneDiv = document.getElementById(divname); 
63.  oneDiv.style.display="none"; 
64.  } 
65. // 出现 
66. function  appear(divname){ 
67.  createBlurDiv(); 
68.  divBlock(divname); 
69.  } 
70. // 消失 
71. function  disappear(divname){ 
72.  divNone(divname); 
73.  removeBlurDiv(); 
74.  } 
75. </script> 

虽说div直接盖不住select但是div可以盖iframe，而iframe可以盖select,所以，把一个iframe来当作div的底，这个div就可以盖住select了.

在弹出层里面加入iframe即可解决：

1. <div id="overlay"> 
2.     <iframe style="width:100%;height:100%;position:absolute;visibility:inherit;z-index:-1;" src="touming.html" frameborder="0"></iframe> 
3. </div>