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

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

jmask(options)

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

options

该参数为对象类型。用来设置遮罩层默认全局属性 属性 类型 默认值 描述 bgcolor string '#eee' 遮罩层背景色 opacity float 0.8 遮罩层背景透明度透明度(0-1)

Example:

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

Jmask Plugin Demo

Demo: bgcolor: default pink rgb(22,233,233) Jmask Demo

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 '#eee' 遮罩层背景色。当mask为true时有效 maskopacity float 0.8 遮罩层背景透明度(0-1)。当mask为true时有效

Example:

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

Demo: JAlert Demo JAlert Demo Use Options

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 '#eee' 遮罩层背景色。当mask为true时有效 maskopacity float 0.8 遮罩层背景透明度(0-1)。当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',maskopacity : 0.9 });

Demo: JConfirm Demo JConfirm Demo Use Options

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 : 'teal',
				maskopacity : 0.9
			});
		});