基于jQuery的简单消息框MsgBox插件

最新内容请查看：http://leeyee.github.io/blog/2012/05/04/jquery-msgbox-plugin

最新版本可在https://github.com/oxcow/MsgBox-jQuery-Plugin/tags 下载

 

 

该项目源代码可通过https://github.com/oxcow/MsgBox.git 获取

 

jQuery MsgBox Plugin 提供四个插件方法：

1. jmask  遮罩层
2. junmask  关闭遮罩层
3. jalert  基于div的消息提醒框
4. jconfirm  基于div的消息确认框

jmask(options)

移动目标元素对象，使其显示在遮罩层正中央。 jmask  接受一个参数

 

options

该参数为对象类型。用来设置遮罩层默认全局属性 属性 类型 默认值 描述

bgcolor	string	'rgba(165, 165, 165, 0.8)'	遮罩层背景色.IE对不支持rgba

Example:

$("#jmaskDemo").jmask();
$("#jmaskDemo").jmask({bgcolor:'pink'});

SourceCode:

					
$("#jmask_Demo").bind("click", function() {
	var _bgcolor = $("#_bgcolor").val();
	if (_bgcolor) {
		$("#jmaskDemo").jmask({
			bgcolor : _bgcolor
		});
	} else {
		$("#jmaskDemo").jmask();
	}
});

junmask()

取消使用 jmask  方法遮罩的目标元素,并隐藏目标元素。该方法不接受参数

Example:

$("#jmaskDemo").junmask();

SourceCode:

$("#jmaskDemo").bind("click", function() {

$("#jmaskDemo").junmask();
});
		

jalert(msg,options)

打开一个消息框。 jalert  接受两个参数

 

msg

消息框显示的消息內容

options

该参数为对象类型，用来设置消息框全局属性 属性 类型 默认值 描述

title	string	'消息框'	消息框标题
width	int	320	消息框宽
height	int	240	消息框高
mask	boolean	true	是否需要遮罩层
maskcolor	string	'rgba(165, 165, 165, 0.8)'	遮罩层背景色。 当mask为true时有效

Example:

$("#jalertDemo").jalert('jalert demo 测试');
$("#jalertDemo").jalert('jalert demo 测试',{
title : 'hello jalert',
width : 300,
height : 250,
mask : false
});

SourceCode:

$("#jalertDemo").bind("click",function(){
	$(this).jalert('jalert demo 测试');
});
$("#jalertDemo1").bind("click",function(){
	$(this).jalert('jalert demo 测试',{ 
		title　: '自定义标题', 
		width : 300, 
		height : 250, 
		mask : false
	});
});		

jconfirm(msg,url,options)

打开一个消息框。 jalert  接受三个参数

 

msg

消息框显示的消息內容

url

消息确认后的跳转地址。使用window.local.href 跳转

options

该参数为对象类型，用来设置消息确认框全局属性 属性 类型 默认值 描述

title	string	'消息框'	消息框标题
width	int	320	消息框宽
height	int	240	消息框高
mask	boolean	true	是否需要遮罩层
maskcolor	string	'rgba(165, 165, 165, 0.8)'	遮罩层背景色。 当mask为true时有效

Example:

$("#jconfirmDemo").jconfirm('jconfirm demo 测试',
'http://www.163.com');
$("#jconfirmDemo").jconfirm('jconfirm demo 测试',null,{
title : 'hello jconfirm',
width : 400,
height : 300,
maskcolor : 'pink'
});

SourceCode:

$("#jconfirmDemo").bind("click",function(){
	$(this).jconfirm('jconfirm demo 测试',

'http://www.163.com');
});
$("#jconfirmDemo1").bind("click",function(){
	$(this).jconfirm('jconfirm demo 测试',null,{ 
		title　: '自定义标题', 
	        width : 400, 
		height : 300, 
		maskcolor : 'pink'
	});
});

 

评论

3 楼 LeeYee 2012-07-24  

zz894571429 写道

我把你的oxcow-MsgBox-jQuery的js，封装到我的js代码Opacity失效

请下载最新版本尝试
https://github.com/oxcow/MsgBox-jQuery-Plugin/tags

2 楼 zz894571429 2012-07-19  

我把你的oxcow-MsgBox-jQuery的js，封装到我的js代码Opacity失效

1 楼 xiaoxiaozhu 2012-06-14