无痛呻吟之jquery讯息提示框

无痛呻吟之jquery消息提示框

工作需要,对jquery弹出框消息插件稍作修改,此插件扩展性、可读性等不错。

参考效果图:
无痛呻吟之jquery讯息提示框
 
无痛呻吟之jquery讯息提示框
 
无痛呻吟之jquery讯息提示框
 
无痛呻吟之jquery讯息提示框
 
无痛呻吟之jquery讯息提示框
 
 

 

部分代码,详情请下载附件:

/**
	 * 两个按钮消息div
	 * 
	 * @param {string}
	 *            msg 消息内容
	 * @param {string}
	 *            isOpen 是跳转还是弹出框
	 * @param {string}
	 *            urlF btnF按钮跳转地址
	 * @param {string}
	 *            urlS btnS按钮息跳转地址
	 * @param {string}操作按钮名称1
	 * @param {string}操作按钮名称2
	 * @param {object}
	 *            属性对象
	 */
	$.fn.jconfirm = function(msg,isOpen,urlF,urlS, btnF, btnS, options) {

		var opts = $.extend({}, $.fn.jconfirm.defaults, options);

		var $msg_box = msgBox(opts.title, msg, opts.width, opts.height);

		var $btn_ok = msgBox_btn(btnF, function() {
			getMaskOrMsgBoxDiv().hide("slow", function() {
				$(this).detach();
				if (urlF) {
					if(isOpen){
						window.open(urlF);
					}else{
						window.location.href = urlF;
					}
				}
			});
		});
		var $btn_cancel = msgBox_btn(btnS, function() {
			getMaskOrMsgBoxDiv().hide("slow", function() {
				$(this).detach();
			});
			if (urlS) {
				if(isOpen){
					window.open(urlS);
				}else{
					window.location.href = urlS;
				}
			}
		});
		$msg_box.find("#" + div_msg_box_bottom.id).append($btn_ok).append(
				$btn_cancel);

		if (opts.mask) {
			$msg_box = mask(opts.maskcolor).append($msg_box);
		}
		this.after($msg_box);
	};
	// 确认消息div默认属性
	$.fn.jconfirm.defaults = {
		title : '确认消息框',
		width : 320,
		height : 240,
		mask : true,
		maskcolor : 'rgba(165, 165, 165, 0.8)'
	};