在 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"> </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+

　　推荐阅读

　　Extjs学习笔记之三 extjs form更多的表单项

1.日期选择框，DateField 日期选择框在日常项目中被广泛应用，一个方便的日期输入机制能够极大的提高用户体验。Extjs的DateField非常友好灵活强大。可以通过如下代码新建一个日期选择框： 复制代码 代码如下: new >>>详细阅读

本文标题：jQuery 页面 Mask实现代码

地址：http://www.17bianji.com/kaifa2/JS/27293.html

 1/2    1