JQuery Ajax 遮罩效果

最新推荐文章于 2023-01-07 14:22:20 发布

wjp852147

最新推荐文章于 2023-01-07 14:22:20 发布

阅读量637

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/wjp852147/article/details/84602968

版权

(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();
                            }
                // 创建一个 Mask 层，追加到对象中
                var maskDiv=$('<div class="maskdivgen">&nbsp;</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,
                   	left: 0,
                    '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();
                      });
            }
        });
    })();

调用：

<a href="#" οnclick="$('#test').mask('DIV层遮罩')">div遮罩</a>
<a href="#" οnclick="$('#test').unmask()">关闭div遮罩</a>
<a href="#" οnclick="$(document).mask('全屏遮罩').click(function(){$(document).unmask()})">全部遮罩</a>

注意：ajax提交时的遮罩效果，应使用异步请求。