遮罩层的简单实现

来源:转载

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

<!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>

分享给朋友:
您可能感兴趣的文章:
随机阅读: