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>
时间: 2024-10-25 14:46:47

JS遮罩层——如何使被遮罩后的链接可以点击的相关文章

简单的ajax遮罩层(加载进度圈)cvi_busy_lib.js

cvi_busy_lib.js: cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.getBusyOverlay(id, overlay, busy) 为遮罩层的方法, id:需要写viewport,详情请看Js内部. overlay:主要是遮罩层的样式,遮罩层显示字体的样式. busy:加载进度圈的样式. 2.xval.settext("正在登录,请稍后......")

转【js &amp; jquery】遮罩层实现禁止a、span、button等元素的鼠标事件

/*遮罩层代码 作用:通过遮罩层的方式防止表单提交次数过多 */ function MaskIt(obj){ var hoverdiv = '<div class="divMask" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: #fff; opacity: 0; filter: alpha(opacity=0);z-index:5;"

jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )

/* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester下IE8-IE10** Author:博客园小dee */ 比起使用注册页和登陆页,网站在当前页使用遮罩层注册和登陆的用户体验要好不少.这里使用jQuery和CSS实现一个简单的遮罩效果. 在页面点击"注册",出现一层有不透明度的黑色遮罩:遮罩层的上方是注册框:此时无法点击页面上除注册框外

数据正在加载 关于 遮罩层的添加

在做项目过程中,发现 如果数据正在加载,点击页面进行别的操作 可能出错(例如 tab 页切换时,操作太快,数据填入了错的tab页 ,当然这种情况是指数据不随tab页的点击而加载) 解决:1.想到点击一个tab页禁止 其它tab的可点击性 如为button (表单类 disabled=true) 在登录页面中 常用此效果来处理 防止用户填完数据后 多次点击登录 进行数据库访问 (用户提交一次后 将登录按钮设为不可点 请求返回后在放开) 如为a 标签  需要三步  1. 在onclick事件 ret

在jQuery环境下制作轻巧遮罩层

遮罩层的好处就是可以屏蔽用户对遮罩层下方元素的操作. 制作原理很简单:1设置遮罩层触发按钮 2设置遮罩层内容 3设置遮罩层背景(重点是捕获内容div的大小位置)4设置点击触发按钮遮罩层背景内容同时显示或隐藏. 具体代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&qu

C# Winform 实现自定义半透明遮罩层介绍

在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下: View Row Code 1 using System; 2 using System.Drawing; 3 using System.Windows.Forms; 4 using System.ComponentModel; 5   6 namespace MyOpaqueLayer 7 { 8     /// <summary>

EasyUI 遮罩层使用

js代码: /* * seven.sun * 使用方法:引入此js, * 使用遮罩层时,调用方法showmask(); * 关闭遮罩层时,调用方法hidemask(); */ function showmask(){ //遮罩层,利用datagrid的遮罩层 $("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%"

C# Winform 实现自定义半透明loading加载遮罩层

在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下: View Row Code 1 using System; 2 using System.Drawing; 3 using System.Windows.Forms; 4 using System.ComponentModel; 5   6 namespace MyOpaqueLayer 7 { 8 /// <summary> 9 /

jquery封装了一个简洁轻巧的可拖动可自定义样式的纯div+css带遮罩层的仿模态弹出框

最近封装上瘾,想起以前做的一个轻巧的弹出框,是样式和脚本分离的,于是重新封装了一下,把样式标签统一到js里了. 里面还有一些问题,但不影响使用,有兴趣的同学,可以参考完善下,有好的建议,请不吝赐教. var PopDialogDefaultConfig = { hasCover: true, //是否带遮罩层 colorOfCover: "#000", //遮罩层颜色 transparencyOfCover: 80, //遮罩层透明度(alpha值,opacity值通过换算得到) bo