zoukankan      html  css  js  c++  java
  • JS遮罩层——如何使被遮罩后的链接可以点击

    在遮罩层的使用过程中,发现了一个问题,如果有一个有<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>
  • 相关阅读:
    [CF845G]Shortest Path Problem?
    [洛谷P4149][IOI2011]Race
    [洛谷P4178]Tree
    [AtCoder AGC27A]Candy Distribution Again
    [洛谷P3806]【模板】点分治1
    [洛谷P2634][国家集训队]聪聪可可
    [CF280C]Game on Tree
    [洛谷P3338][ZJOI2014]力
    [CF438D]The Child and Sequence
    [CF609E]Minimum spanning tree for each edge
  • 原文地址:https://www.cnblogs.com/yourchoose/p/4645960.html
Copyright © 2011-2022 走看看