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

最新地址请访问：http://leeyee.github.io/blog/2012/05/04/jquery-msgbox-plugin

下载地址:jquery.msgbox.js

GitHub: https://github.com/oxcow/MsgBox-jQuery-Plugin/tags

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

转载于:https://my.oschina.net/yeelee/blog/650881