实现遮罩层效果-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_16842/article/details/82098407

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<HTML>   
 <HEAD>   
  <TITLE>遮罩层效果</TITLE>   
    <style type="text/css">   
        .mask {   
            padding : 0px ;   
            margin : 0px ;   
            background : #555 ;   
            position : absolute ;   
        }   
    </style>   

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>   
    <script type="text/javascript">   
        $(function(){   
            Mask.load() ;   
        }) ;   

        var Mask = function(){   
            function load(){   
                var jq = _render() ;   
                $("body").click(function(){   
                    unload(jq) ;   
                }) ;   
            } ;   
            function unload(jq){   
                jq.remove() ;   
            } ;   
            function _render(){   
                var _div = $("<div></div>")   
                                .addClass("mask")   
                                .appendTo("body") ;   
                var _css = _getCss() ;   
                _div   
                    .css(_css)   
                    .fadeIn() ;   
                return _div ;   
            } ;   
            function _getCss(){   
                var css = {   
                    display : "none" ,   
                    top : 0 +  "px" ,   
                    left : 0 + "px" ,   
                    width : document.documentElement.clientWidth + "px" ,   
                    height : document.documentElement.clientHeight + "px" ,   
                    zIndex : 9999 ,   
                    opacity : 0.6   
                } ;   
                return css ;   
            } ;   
            return {   
                load : load ,   
                unload : unload   
            } ;   
        }() ;   
    </script>   
 </HEAD>   

 <BODY>   
     测试测试
 </BODY>   
</HTML>

JQuery遮罩层