Ross Wan's World!

Python, Ajax, PHP and Linux.

jQuery: 页面 Mask

Posted by Ross Wan 于 2008/12/07

何为页面 Mask (遮罩)?看过 jQuery 的 Lightbox 插件的一定不会陌生。就是在页面上建一个透明层遮盖住页面的全部内部。在 Ajax 应用中,显示一个 Dialog(以 Div 方式显示)前,都会先建一个 Mask。因为经常会用到,所以写成了一个 jQuery 插件,方便自己的使用。

代码

(function($){
    $.extend({
        documentMask: function(options){
            // 扩展参数
            var op = $.extend({
                opacity: 0.8,
                z: 10000,
                bgcolor: '#000'
            }, options);

            // 创建一个 Mask 层,追加到 document.body
            $('<div class="jquery_addmask">&nbsp;</div>').appendTo(document.body).css({
                position: 'absolute',
                top: '0px',
                left: '0px',
                'z-index': op.z,
                width: $(document).width(),
                height: $(document).height(),
                'background-color': op.bgcolor,
                opacity: 0
            }).fadeIn('slow', function(){
                // 淡入淡出效果
                $(this).fadeTo('slow', op.opacity);
            }).click(function(){
                // 单击事件,Mask 被销毁
                $(this).fadeTo('slow', 0, function(){
                    $(this).remove();
                });
            });

            return this;
        }
    });
})(jQuery);

使用方法

$.documentMask();

$.documentMask({
    'opacity': 0.6,
    'bgcolor': '#E79673',
    'z': 1000000
});

参数中,z 表示 z-index。

兼容性

支持 IE 6.0+, FF2+, Safari 3.1+, Opera 9.0+

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

 
%d 博主赞过: