JQ 弹出框

不用写任何html，只需用一个按钮直接调用下方方法就行了，一共有两种模式

appendHtml(“alert”); 这样是只出来确认按钮

appendHtml(“confirm”);这样是确认取消都有的，这样的确定会调用回调函数，
如果不需要的话可以把 btnOk(callback);改成btnOk();
需要回调的话就不需要动，在callback方法中写入相应的逻辑就行了

//生成弹出框的方法
function appendHtml(type){
	var html = "";
	html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">标题</span>';
	html += '<a id="mb_ico">x</a><div id="mb_msg">内容</div><div id="mb_btnbox">';
	if (type == "alert") {
      html += '<input id="mb_btn_ok" type="button" value="确定" />';
    }
    if (type == "confirm") {
        html += '<input id="mb_btn_ok" type="button" value="确定" />';
        html += '<input id="mb_btn_no" type="button" value="取消" />';
    }
	html += '</div></div>';
	//必须先将_html添加到body，再设置Css样式
	$("body").append(html);
	//生成Css
	GenerateCss();
	if (type == "alert") {
		btnOk(); //alert只是弹出消息，因此没必要用到回调函数callback
	}
	if (type == "confirm") {
        btnOk(callback);
	}
	btnNo();
}
//生成Css
var GenerateCss = function() {
	$("#mb_box").css({
		width: '100%',
		height: '100%',
		zIndex: '99999',
		position: 'fixed',
		filter: 'Alpha(opacity=60)',
		backgroundColor: 'black',
		top: '0',
		left: '0',
		opacity: '0.6'
	});
	$("#mb_con").css({
		zIndex: '999999',
		width: '900px',
		position: 'fixed',
		backgroundColor: 'White',
		borderRadius: '15px'
	});
	$("#mb_tit").css({
		display: 'block',
		fontSize: '14px',
		color: '#444',
		padding: '10px 15px',
		backgroundColor: '#DDD',
		borderRadius: '15px 15px 0 0',
		borderBottom: '3px solid #009BFE',
		fontWeight: 'bold'
	});
	$("#mb_msg").css({
		padding: '20px',
		lineHeight: '20px',
		borderBottom: '1px dashed #DDD',
		fontSize: '13px',
		height: '350px',
		overflow: 'auto'
	});
	$("#mb_ico").css({
		display: 'block',
		position: 'absolute',
		right: '10px',
		top: '9px',
		border: '1px solid Gray',
		width: '18px',
		height: '18px',
		textAlign: 'center',
		lineHeight: '16px',
		cursor: 'pointer',
		borderRadius: '12px',
		fontFamily: '微软雅黑'
	});
	$("#mb_btnbox").css({
		margin: '15px 0 10px 0',
		textAlign: 'center'
	});
	$("#mb_btn_ok,#mb_btn_no").css({
		width: '85px',
		height: '30px',
		color: 'white',
		border: 'none'
	});
	$("#mb_btn_ok").css({
		backgroundColor: '#168bbb'
	});
	$("#mb_btn_no").css({
		backgroundColor: 'gray',
		marginLeft: '20px'
	});
	//右上角关闭按钮hover样式
	$("#mb_ico").hover(function() {
		$(this).css({
			backgroundColor: 'Red',
			color: 'White'
		});
	}, function() {
		$(this).css({
			backgroundColor: '#DDD',
			color: 'black'
		});
	});
	var _widht = document.documentElement.clientWidth; //屏幕宽
	var _height = document.documentElement.clientHeight; //屏幕高
	var boxWidth = $("#mb_con").width();
	var boxHeight = $("#mb_con").height();
	//让提示框居中
	$("#mb_con").css({
		top: (_height - boxHeight) / 2 + "px",
		left: (_widht - boxWidth) / 2 + "px"
	});
}
//确定按钮事件
var btnOk = function(callback) {
	$("#mb_btn_ok").click(function() {
		if (typeof(callback) == 'function') {
			callback();//回调函数
			$("#mb_box,#mb_con").remove();
		}
	});
}
//取消按钮事件
var btnNo = function() {
	$("#mb_btn_no,#mb_ico").click(function() {
		$("#mb_box,#mb_con").remove();
	});
}
//回调函数
function callback(){
	alert("我是回调函数callback()");
}

效果图：