jQuery Mask(遮罩层)

JavaScript:

     (function () {

            $.extend($.fn, {

                mask: function (msg, maskDivClass) {

this.unmask();

var op = {

                        opacity: 0.8,

                        z: 10000,

                        bgcolor: '#ccc'

                    };

var original = $(document.body);

var position = { top: 0, left: 0 };

if (this[0] && this[0] !== window.document) {

                        original = this;

                        position = original.position();

                    }

var maskDiv = $('<div class="maskdivgen"> </div>');

                    maskDiv.appendTo(original);

var maskWidth = original.outerWidth();

if (!maskWidth) {

                        maskWidth = original.width();

                    }

var maskHeight = original.outerHeight();

if (!maskHeight) {

                        maskHeight = original.height();

                    }

                    maskDiv.css({

                        position: 'absolute',

                        top: position.top,

                        left: position.left,

                        'z-index': op.z,

                        width: maskWidth,

                        height: maskHeight,

                        'background-color': op.bgcolor,

                        opacity: 0

                    });

if (maskDivClass) {

                        maskDiv.addClass(maskDivClass);

                    }

if (msg) {

var msgDiv = $('<div style="position:absolute;border:#6593cf 1px solid; padding:2px;background:#ccca">'

+'<div style="line-height:24px;border:#a3bad9 1px solid;background:white;padding:2px 10px 2px 10px">' 

+ msg + '</div></div>');

                        msgDiv.appendTo(maskDiv);

var widthspace = (maskDiv.width() - msgDiv.width());

var heightspace = (maskDiv.height() - msgDiv.height());

                        msgDiv.css({

                            cursor: 'wait',

                            top: (heightspace / 2 - 2),

                            left: (widthspace / 2 - 2)

                        });

                    }

                    maskDiv.fadeIn('fast', function () {

                        $(this).fadeTo('slow', op.opacity);

                    })

return maskDiv;

                },

                unmask: function () {

var original = $(document.body);

if (this[0] && this[0] !== window.document) {

                        original = $(this[0]);

                    }

                    original.find("> div.maskdivgen").fadeOut('slow', 0, function () {

                        $(this).remove();

                    });

                }

            });

        })(); 

 

Html使用示例：

View Code

<bodystyle="width: 100%">

    测试

<divid="test"style="width: 200px; height: 100px; border: black 1px solid;">

</div>

<a href="#" onclick="$('#test').mask('DIV层遮罩')" >div层遮罩</a><a href="#"onclick="$('#test').unmask()">

        关闭遮罩</a><a href="#"onclick="$(document).mask('全部遮罩').click(function(){$(document).unmask()})">

            全部遮罩</a>

</body>

转载于:https://www.cnblogs.com/rynnwang/archive/2012/04/04/2431956.html