<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html"charset="utf-8" />
<title>无标题文档</title>
</head>
<style>
#ad{
background-color:#CCC
width:100%
height:100%
display:block
position:absolute
filter:Alpha(Opacity=0.1)
}
#adclose{
position:relative
background-color:#0CF
float:right
width:100%
filter:Alpha(Opacity=0.1)
}
#adclose a{ float:right}
</style>
<script>
function displaybox()
{
document.getElementById("ad").style.display="none"
document.getElementById("adclose").style.display="none"
}
</script>
<body>
<div id="ad">
<div id="adclose">
<a href="#" onclick="displaybox()">X</a>
</div>
<img src="#" alt="广告"/><!--或插入flash控件-->
</div>
网页原内容
</body>
</html>
P.s.
1、IE10无法使用filter滤镜,请用其他版本浏览器测试。
2、这是最简化后的一个实例。
屏蔽覆盖网页透明广告的解决办法如下:1、屏蔽网页外部的弹窗广告:
使用安全软件附带的弹窗拦截工具(以下以360安全卫士附带的弹窗过滤器为例)一般能够屏蔽大部分弹窗广告。
(1)进入360安全卫士主界面:如果安装有360安全卫士,则点击桌面任务栏右下角处的360安全卫士图标,在弹出的360安全卫士主界面,点击右下角的“更多”。
(2)安装弹窗过滤器:在新窗口中点击进入“电脑安全”,找到“弹窗拦截”工具,点击右上角出现的“添加”,即可在线安装此工具。
(3)设置弹窗过滤器:安装完成后会显示弹窗过滤器主界面。其左侧有“关闭过滤”、“开启过滤”和“强力模式”三个选项,一般可选择“开启过滤”,如果遇到无法拦截的弹窗广告,还可选用“强力模式”,利用其中的“手动定位”功能确定需要拦截的对象,效果更好。
通过JS代码 document.getElementById('divID').style.etElementById('divID').style.display = 'none'。函数可以实现。
1、遮罩层:<div id="back"></div>,即作为背景层,覆盖整个页面。弹出层:<div id="form"></div>,即背景层上的一层,此层可根据#form{top: 10%left: 10%width: 20%height: 30%},调整弹出层的弹出位置。
2、弹出层和遮罩层全部为div标签,可以利用display来控制显示和隐藏的属性,在js中,显示: document.getElementById('divID').style.display = document.getElementById('divID').style.display = 'none'。
3、显示遮罩层和弹出层,即可用图中popDiv()函数表示: 其中,showId 表示弹出层的divId, backId 表示遮罩层的divId;函数第去、2行显示弹出层和遮罩,3、4、5行设置遮罩层的长度、宽度。
4、关闭弹出层和遮罩层用hideDiv函数(), 其中:showId 表示弹出层的divId, backId 表示遮罩层的divId;先关闭弹出层,后关闭遮罩层。
5、点击按钮后,弹出,要给按钮加上onclick函数,<button onclick="popDiv('form','back')">点我,显示弹出层</button>。
6、整体代码如下,css 样式可根据个人的喜好自行添加。