在遮罩层的使用过程中,发现了一个问题,如果有一个有<a></a>标签链接的HTML页面,如果使用JS遮罩层将此HTML页面遮罩,则此链接无法点击;如果要使此链接可以点击,则需要在<a></a>标签中添加style属性“position:relative;”,例如:
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>DIV CSS遮罩层</title> 4 <script language="javascript" type="text/javascript"> 5 function showdiv() { 6 document.getElementById("bg").style.display ="block"; 7 //document.getElementById("show").style.display ="block"; 8 } 9 function hidediv() { 10 document.getElementById("bg").style.display =‘none‘; 11 document.getElementById("show").style.display =‘none‘; 12 } 13 </script> 14 <style type="text/css"> 15 #bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background- 16 17 color: black; z-index:1; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);} 18 #show{display: none; position: absolute; top: 25%; left: 22%; width: 53%; height: 49%; padding: 8px; 19 20 border: 8px solid #E8E9F7; background-color: white; z-index:1002; overflow: auto;} 21 </style> 22 </head> 23 <body> 24 <input id="btnshow" type="button" value="Show" onclick="showdiv();"/> 25 <!--<div style="z-index:100;position:fixed">--> 26 <a style="z-index:100;position:relative;" href="http://www.baidu.com">百度</a> 27 <!--</div>--> 28 <div id="bg"></div> 29 <div id="show">测试 30 <input id="btnclose" type="button" value="Close" onclick="hidediv();"/> 31 </div> 32 </body> 33 </html>
时间: 2024-10-25 14:46:47