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 插件,方便自己的使用。


        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);
                // 单击事件,Mask 被销毁
                $(this).fadeTo('slow', 0, function(){

            return this;



    'opacity': 0.6,
    'bgcolor': '#E79673',
    'z': 1000000

参数中,z 表示 z-index。


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



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

You are commenting using your 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 博主赞过: