弹出Message

开发过程中，经常需要弹出各种信息提示框，很多框架都自定义了提示框，有的框架或许没有，我们也可以使用alert ，confirm等IE自带的信息提示框，缺点就是太死板，无法修改其样式，所以很多时候是我们自定义提示框。

var cancleFlag  = 0;
function msgbox(content, cancel, icon) {
	if(null != cancel){
		cancleFlag  = cancel;
		}else{
		cancleFlag = 0;}
	/*		
	参数列表说明:
	title :弹出对话框的标题,标题内容最好在25个字符内,否则会导致显示图片的异常															
	text  :弹出对话框的内容,可以使用HTML代码,例如<font color='red'>删除么?</font>,如果直接带入函数,注意转义
	func  :弹出对话框点击确认后执行的函数,需要写全函数的引用,例如add(),如果直接带入函数,注意转义。
	cancel:弹出对话框是否显示取消按钮,为空的话不显示,为1时显示
	focus :弹出对话框焦点的位置,0焦点在确认按钮上,1在取消按钮上,为空时默认在确认按钮上
	icon  :弹出对话框的图标
	Author:Jedliu
	Blog  :Jedliu.cublog.cn 
	【网页转载请保留版权信息,实际使用时可以除去该信息】
	 */
	icon = "msgbox_" + icon + ".png";
	create_mask();
	var temp = "<div style=\"width:300px;border: 3px solid rgb(224,224,224);background-color: #fff; font-weight: bold;font-size: 14px;\" >"
			+ "<div style=\"line-height:25px; padding:0px 5px;background-color:rgb(224,224,224);\">"
			+ "代理店システム"
			+ "</div>"
			+ "<table  cellspacing=\"0\" border=\"0\"><tr><td style=\" padding:0px 0px 0px 20px; \"><img style=\" margin:0px 20px 0px 0px; \" src=\" ../resources/Themes/Images\\" + icon + "\" width=\"32\" height=\"32\"></td>"
			+ "<td ><div style=\"width:200px;background-color: #fff; font-weight: bold;font-size: 14px;padding:20px 0px ; text-align:center;\">"
			+ content
			+ "</div></td></tr></table>"
			+ "<div style=\"text-align:center; padding:0px 0px 20px;background-color: #fff;\"><input type='button'  style=\"border:1px solid #CCC; background-color:#CCC; width:50px; height:25px;\" value='OK'id=\"msgconfirmb\"   οnclick=\"remove(); ok();\">";
	if (null != cancel) {
		temp += "   <input type='button' style=\"border:1px solid #CCC; background-color:#CCC; width:80px; height:25px;\" value='キャンセル'  id=\"msgcancelb\"   onClick=\"remove(); cancle();\">";
	}
	temp += "</div></div>";
	create_msgbox(400, 200, temp);
	document.getElementById("msgconfirmb").focus();
}
function get_width() {
	return (document.body.clientWidth + document.body.scrollLeft);
}
function get_height() {
	return (document.body.clientHeight + document.body.scrollTop);
}
function get_left(w) {
	var bw = document.body.clientWidth;
	var bh = document.body.clientHeight;
	w = parseFloat(w);
	return (bw / 2 - w / 2 + document.body.scrollLeft);
}
function get_top(h) {
	var bw = document.body.clientWidth;
	var bh = document.body.clientHeight;
	h = parseFloat(h);
	return (bh / 2 - h / 2 + document.body.scrollTop);
}
function create_mask() {//创建遮罩层的函数
	$("body").append("<div id='mask' style ='background: black; position: absolute; z-Index:9999; opacity:0.4'/>");
/*	var mask = document.createElement("div");
	mask.id = "mask";
	mask.style.position = "absolute";
	mask.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=4,opacity=25)";//IE的不透明设置
	mask.style.opacity = 0.4;//Mozilla的不透明设置
	mask.style.background = "black";
	mask.style.top = "0px";
	mask.style.left = "0px";*/
	$("#mask").css('top','0px');
	$("#mask").css('left','0px');
	$("#mask").css('width',get_width()+'px');
	$("#mask").css('height',get_height()+'px');
	//mask.style.width = get_width();
	//mask.style.height = get_height();
	// mask.style.zIndex = 9999;
	//document.body.appendChild(mask);
	
}
function create_msgbox(w, h, t) {//创建弹出对话框的函数
	var box = document.createElement("div");
	box.id = "msgbox";
	box.style.position = "absolute";
	box.style.width = w;
	box.style.height = h;
	box.style.overflow = "visible";
	box.innerHTML = t;
	box.style.zIndex = 10001;
	//document.body.appendChild(box);
	$("body").append(box);

	re_pos();
}
function re_mask() {
	/*
	更改遮罩层的大小,确保在滚动以及窗口大小改变时还可以覆盖所有的内容
	 */
	//var mask = document.getElementById("mask");
	var mask = $("#mask");
	if (null == mask)
		return;
	//mask.style.width = get_width() + "px";
	//mask.style.height = get_height() + "px";
	mask.css('width',get_width() + "px");
	mask.css('height',get_height() + "px");
	
}
function re_pos() {
	/*
	更改弹出对话框层的位置,确保在滚动以及窗口大小改变时一直保持在网页的最中间
	 */
	var box = $("#msgbox");
	if (null != box) {
		//var w = box.style.width;
		//var h = box.style.height;
		var w = box.css('width');
		var h = box.css('height');
		//box.style.left = get_left(w) + "px";
		//box.style.top = get_top(h) + "px";
		
		box.css('left', get_left(w) + "px");
		box.css('top', get_top(h) + "px");
	}
}
function remove() {
	/*
	清除遮罩层以及弹出的对话框
	 */
	var mask = document.getElementById("mask");
	var msgbox = document.getElementById("msgbox");
	if (null == mask && null == msgbox)
		return;
	document.body.removeChild(mask);
	document.body.removeChild(msgbox);
}

function re_show() {
	/*
	重新显示遮罩层以及弹出窗口元素
	 */
	re_pos();
	re_mask();
}

function ok() {
	if(1 == cancleFlag){del();
	}
}

function cancle() {
	return false;
}