基于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'
	});
});