jQuery 页面 Mask实现代码

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

赞 (0)

相关推荐

  • jQuery 页面 Mask实现代码

    在 Ajax 应用中,显示一个 Dialog(以 Div 方式显示)前,都会先建一个 Mask.因为经常会用到,所以写成了一个 jQuery 插件,方便自己的使用. 复制代码 代码如下: (function($){ $.extend({ documentMask: function(options){ // 扩展参数 var op = $.extend({ opacity: 0.8, z: 10000, bgcolor: '#000' }, options); // 创建一个 Mask 层,追加

  • 使用Ajax局部更新Razor页面的实例代码

    使用Ajax局部更新Razor页面的实例代码

    Razor功能非常强大,但是本身并不能做到无刷新,所以需要配合ajax使用 本文就做一个简单例子,实现Razor配合ajax做到局部刷新. 首先,我们创建一个MVC项目 让我们创建一个简单的Controller Book 然后对其添加一个视图,并且添加上一些简单的Html代码 @{ ViewBag.Title = "Index"; Layout = null; } <!DOCTYPE html> <html> <head> <meta http

  • jQuery fadeOut 异步实例代码详解

    定义和用法 fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏(褪色效果). 注释:隐藏的元素不会被完全显示(不再影响页面的布局). 提示:该方法通常与 fadeIn() 方法一起使用. 语法 $(selector).fadeOut(speed,easing,callback) 1. 概述 jquery实现动画效果的函数使用起来很方便,不过动画执行是异步的,所以要把自定义的操作放在回调函数里. 2. example <html> <body> <table id

  • Session过期后自动跳转到登录页面的实例代码

    最近做了一个项目其中有需求,要实现自动登录功能,通过查阅相关资料,打算用session监听来做,下面给大家列出了配置监听器的方法: 1.在项目的web.xml文件中添加如下代码: <!--添加Session监听器--> <listener> <listener-class> 监听器路径 </listener-class> </listener> 2.编写java类. public class SessionListener implements

  • el表达式 写入bootstrap表格数据页面的实例代码

    el表达式 写入bootstrap表格数据页面的实例代码

    el表达式,写入bootstrap表格,简化代码,效果图: 不多说,上干货: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.

  • jqGrid jQuery 表格插件测试代码

    jqGrid jQuery 表格插件测试代码

    官方Demo地址:http://www.trirand.com/blog/jqgrid/jqgrid.html 效果图: 页面代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w

  • JQuery页面随滚动条动态加载效果的简单实现(推荐)

    Google阅读器上有一个AJAX scollLoad效果很不错,就是阅读项目时不需要翻页,浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来,一直到所有项目加载完为止.要知道,数据量增加很频繁时,要通过定位页码来找到目标数据似乎并没有什么意义.我觉得用户体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据.至于浏览数据,尤其是浏览最新的数据,利用浏览器滚动条来加载,是很好的尝试-- 我试着用jquery来实现这个功能.先要得到滚动条的总长属性值:scrollHeight

  • 自制轻量级仿jQuery.boxy对话框插件代码

    对此,jquery.boxy插件已经做得非常强大了,常用的提示.确认,拖拽.改变大小.异步加载都非常实用,导致文件较大(可忽略不计),很多功能并不需要,为此,抱着在边学边实践的态度和想法,自制一款适用于本项目的轻量级弹出层插件,这是第一次写jqeury插件,也为了以后能将常用操作封装为jquery插件做准备吧. 首先来个插件名字,这样才能去唬人,就叫jquey.cvbox.min.js吧,cv就是网站域名ChinaValue的缩写,压缩后的容量控制在6K以下.因为还未完成,所以先将思想记录下来.

  • 基于JQUERY的多级联动代码

    jquery.select.more.js 复制代码 代码如下: (function($){ $.fn.doselectmore = function(settings) { var dfop ={ namekey: "name", pnamekey: "name", idkey: "id", selectname:"sel", method: "POST", datatype: "json&qu

  • node.js 一个简单的页面输出实现代码

    node.js 一个简单的页面输出实现代码

    安装过程就不说了.如果成功是能使用node的命令.node.js调试是非常方便的.每种后台语言都有一个向那个黑黢黢的控制台团输出语用的命令.node.js沿用FF那套东西,也就是console对象与其方法.我们首先建一个example.js文件,内容如下,然后在控制台打开它. 复制代码 代码如下: console.log("hello node.js") for(var i in console){ console.log(i+" "+console[i]) } n

随机推荐