基于jquery的弹出框

function EmptyBox(params){
this.width = 400;
this.height = 100;
this.content = "";
if(typeof params === "object"){
if(typeof params.width === "number"){
this.width = params.width;
}
if(typeof params.height === "number"){
this.height = params.height;
}
if(typeof params.content !== undefined){
this.content = params.content;
}
} else if(typeof params === "string"){
this.content = params;
}
this.init = function(){
var bg = "<div id='bg' style='background:#000;width:100%;height:100%;position:absolute;left:0px;top:0px;opacity:0.4;filter:alpha(opacity=40);z-index:100;'></div>";
var box = "<div id='box' style='background:#fff;width:" + this.width + "px;min-height:" + this.height + "px;position:fixed;left:50%;top:50%;border-radius:5px;;z-index:101;text-align:center;'>" +
"<span id='closeIcon' style='display:inline-block;float:right;width:10px;height:10px;margin-right:15px;margin-top:15px;cursor:pointer;'>×</span>" +
"<div id='content'>" + this.content + "</div>" +
 "</div>";

if($("#bg").length > 0){
$("#bg").remove();
}
if($("#box").length > 0){
$("#box").remove();
}
$("body").append(bg + box);
$("#bg").css("height", $(document).height());
$("#box").css({
"left" : ($(window).width() - $("#box").width()) / 2,
"top" : ($(window).height() - $("#box").height()) / 2,
"height" : "auto",
"max-height" : $(window).height()-10,
"overflow" : "hidden"
});
$("#content").css({
"margin" : "10px",
"margin-top" : "25px",
"max-height" : $(window).height()-160,
"overflow" : "auto",
"font-size" : "14px",
"overflow-x" : "hidden"
});
$("#bg, #closeIcon").click(function(){
$("#bg, #box").hide();
});
};
};
(function($){
var defaults = {
callBack : undefined,//确定按钮的回调函数
cancelCallBack : undefined,//取消按钮的回调函数
xCallBack : undefined,//右上角的叉叉的回调
conBtn : "确定",//按钮名称
cancelBtn : "取消",//按钮名称
showCancel : false,//是否显示取消按钮
focusOn : undefined,//默认焦点，1：确定按钮，0：取消按钮
title : "提示"//标题
};
var setStyle = function(options){
//标题
$("#title").css({
"height" : "20px",
"font-weight" : "700",
"text-align" : "center",
"font-family" : "黑体",
"font-size" : "16px",
"margin-top" : "35px"
});
//按钮区域
$("#btns").css({
"text-align" : "center",
"margin-top" : "30px",
"margin-bottom" : "20px",
"overflow" : "hidden"
});
//按钮
$("#btns input").css({
"float" : "left",
"width" : "82px",
"height" : "32px",
"border" : "1px solid rgb(204, 204, 204)",
"border-radius" : "3px",
"color" : "rgb(153, 153, 153)",
"font-size" : "12px",
"background" : "#fff",
"cursor" : "pointer"
});
//box位置居中
$("#box").css({
"top" : ($(window).height() - $("#box").height()) / 2
});
if(options.focusOn == 1){//焦点在确定按钮上
$("#conBtn").css("border", "1px solid rgb(1, 158, 239)");
$("#conBtn").unbind("hover");
$("#conBtn").hover(function(){
$(this).css("color", "#000");
},function(){
$(this).css("color", "rgb(153, 153, 153)");
});
} else if(options.focusOn == 0){//焦点在取消按钮上
$("#cancelBtn").css("border", "1px solid rgb(1, 158, 239)");
$("#cancelBtn").unbind("hover");
$("#cancelBtn").hover(function(){
$(this).css("color", "#000");
},function(){
$(this).css("color", "rgb(153, 153, 153)");
});
}
};
var bindEvent = function(options){
//确认和取消按钮鼠标移上移出的样式
$("#btns input").hover(function(){
$(this).css({
"color" : "#000",
"border-color" : "rgb(1, 158, 239)"
});
}, function(){
$(this).css({
"color" : "rgb(153, 153, 153)",
"border-color" : "rgb(204, 204, 204)"
});
});
//确定按钮
$("#conBtn").click(function(){
if(typeof options.callBack === "function"){
options.callBack();
}
hide();
});
//取消按钮
$("#cancelBtn").click(function(){
if(typeof options.cancelCallBack === "function"){
options.cancelCallBack();
}
hide();
});
//右上角的叉叉
$("#closeIcon").click(function(){
if(typeof options.xCallBack === "function"){
options.xCallBack();
}
hide();
});
};
var hide = function(){
$("#bg, #box").hide();
};
$.alert = function(options){
var options = $.extend(true, {}, defaults, options);
EmptyBox.call(this, options);
this.init();
var titleH = "<div id='title' style=''>" + options.title + "</div>";
$(titleH).insertBefore($("#content"));
var chItemH = "<div id='btns'>";
chItemH += "<input id='conBtn' type='button' value='" + options.conBtn + "'/>";
if(options.showCancel == true){
chItemH += "<input id='cancelBtn' type='button' value='" + options.cancelBtn + "'/>";
}
chItemH += "</div>";
$("#box").append(chItemH);
if(options.showCancel == false){
$("#conBtn").css("margin-left", ($("#btns").width()-54-$("#conBtn").width())/2);
} else if(options.showCancel == true){
$("#conBtn").css("margin-left", $("#box").width()/3 - $("#conBtn").width()-10);
$("#cancelBtn").css("margin-left", $("#box").width()/3 - $("#cancelBtn").width()*2-50);
}
bindEvent(options);
setStyle(options);
};
})(jQuery);