源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jQuery 页面 Mask实现代码

  • 时间:2022-11-06 08:38 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jQuery 页面 Mask实现代码
在 Ajax 应用中,显示一个 Dialog(以 Div 方式显示)前,都会先建一个 Mask。因为经常会用到,所以写成了一个 jQuery 插件,方便自己的使用。
[u]复制代码[/u] 代码如下:
(function($){ $.extend({ documentMask: function(options){ // 扩展参数 var op = $.extend({ opacity: 0.8, z: 10000, bgcolor: '#000' }, options); // 创建一个 Mask 层,追加到 document.body $('<div class="jquery_addmask"> </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);
[b]使用方法 [/b]
[u]复制代码[/u] 代码如下:
$.documentMask(); $.documentMask({ 'opacity': 0.6, 'bgcolor': '#E79673', 'z': 1000000 });
参数中,z 表示 z-index。 兼容性 支持 IE 6.0+, FF2+, Safari 3.1+, Opera 9.0+
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部