遮罩层的简单实现

发表于   |   更新于 | 分类于 | | 文章阅读量
字数统计: 276 | 阅读时长 ≈ 1

主要就是操作opacity这一属性。不透明度。
IE9以上, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。
IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>遮罩层</title>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		
		<style type="text/css">
			.mask{
				width: 100%;
			    height: 100%;
				display: none;
				position: absolute;
				top: 0px;
				left: 0px;
				background-color: #777;
				
				z-index: 100;
				
				/*透明度*/
				/*ie9以下*/
				filter:alpha(opacity=40); 
				/*火狐*/
				-moz-opacity: 0.4;
				opacity: 0.4;
			}
			.hideMask{
				position: absolute;
				top: 100px;
				left: 300px;
				z-index: 102;
				display: none;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				
				var mask = $(".mask");
				var hideMask = $(".hideMask");
				$('.showMask').click(function(){
					mask.show();
					hideMask.show();
				});
				hideMask.click(function(){
					mask.hide();
					hideMask.hide();
				});
				
			});
		</script>
	</head>
	
	<body>
		<div class="mask">
		</div>
		<button class="hideMask">关闭遮罩层</button>
		<button class="showMask">显示遮罩层</button>
		
	</body>
</html>
-------------本文结束感谢您的阅读-------------

本文标题:遮罩层的简单实现

文章作者:老米的世界

发布时间:2017年10月19日 - 00:00

最后更新:2019年09月05日 - 22:06

原始链接:http://mpfly.github.io/2017/10/19/遮罩层的简单实现/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

老米的世界 wechat
欢迎关注我的微信公众号！
坚持原创技术分享，您的支持将鼓励我继续创作！