写了个日常开发常用的对话框（模拟alert，confirm....）

.J_PZDialog_mask{ display:none;background:#000; opacity:0.3;filter:alpha(opacity=30);position:fixed;_position:absolute;left:0;top:0; z-index:9999;}
.J_PZDialog{display:none;position:fixed;_position:absolute; padding:5px;border-radius:5px; background:#a4a2a3; z-index:10000;}
.J_PZDialog_caption{height:30px; line-height:27px; background:#000;}
.J_PZDialog_caption_text{color:#fff;font-size:12px; padding-left:15px;}
.J_PZDialog_close{ cursor:pointer;float:right;display:block;width:15px;height:15px;font-size:11px; text-align:center; position:relative;top:7px;left:-7px; line-height:15px; background:#ccc; }
.J_PZDialog_content{ min-height:30px;background:#FFF;color:#666; padding:10px; font-size:12px; overflow:hidden; zoom:1; line-height:180%;}
.J_PZDialog_content .dialog_alert_tips{ line-height:180%;text-indent:10px;margin-bottom:10px;}
.J_PZDialog_content .dialog_btn_box{ overflow:hidden;zoom:1;padding-left:25px;}
.J_PZDialog_content .dialog_alert_btn{width:60px;cursor:pointer; background:#CCC;padding:2px; margin:0 auto;}
.J_PZDialog_content .dialog_alert_btn div{height:20px; border:1px solid #999;background:#eee; line-height:20px; text-align:center;}
.J_PZDialog_content .dialog_btn_box .dialog_alert_btn{margin: inherit;float:left; margin-right:5px;}
.J_PZDialog_content  .dialog_alert_btn:hover div{border-color:#666;color:#000;}

(function(){
/**
@基于jQuery的对话框效果
@实现4中常见的对话框效果，可以工具需要修改css样式达到自己想要的效果
@调用方式和配置参数，可以看下对应的4中创建方式
@杨永
@QQ:377746756
@call:18911082352
@版本:1.0
*/
function PZ_Dialog(args){
//保存参数对象
this.args=args;
//初始化参数默认值
this.dialogWidth=args.width||400;
this.dialogHeight=args.height||200;
this.dialogText=args.text||"提示信息";
this.isMask=args.mask||false;
this.dialogType=args.type||false;
this.dialogAlertTips=args.tipsText||"";
this.dialogDrag=args.isDrag||false;
//如果指定了对话框类型，就设定自身的尺寸
if(this.dialogType=="alert"){
this.dialogWidth=args.width||200;
this.dialogHeight=args.height||110;
}else if(this.dialogType=="confirm"){
this.dialogWidth=args.width||200;
this.dialogHeight=args.height||110;
this.dialogCallBack=args.callBack;
}else if(this.dialogType=="tips"){
this.dialogWidth=args.width||150;
this.dialogHeight=args.height||30;
};
//插入到页面
this.insertDialogDOM();
};
PZ_Dialog.prototype={
setDialogTips:function(){
var _this=this;
//删除内容,关闭按钮
this.J_PZDialog_content.remove();
this.J_PZDialog_close.remove();
this.J_PZDialog_caption_text.css("paddingLeft",0).parent().css({
textAlign:"center",
backgroundColor:"green",
fontWeight:"bold"
});
window.setTimeout(function(){
_this.closeDialog();
},3000)
},
setDialogDef:function(){
this.J_PZDialog_content.text(this.dialogAlertTips).css("textIndent","15px");
},
setDialogConfirm:function(){
var _this=this,
tipsTextBox=$("<div class='dialog_alert_tips'>"+this.dialogAlertTips+"</div>"),
btnBox=$("<div class='dialog_btn_box'></div>"),
btn=$("<div class='dialog_alert_btn'><div>取消</div></div>"),
btnSure=$("<div class='dialog_alert_btn'><div>确定</div></div>");
//绑定取消和执行callback
btn.click(function(){
_this.closeDialog();
});
btnSure.click(function(){
_this.closeDialog();
_this.dialogCallBack();
});
btnBox.append(btnSure,btn);
this.J_PZDialog_content.append(tipsTextBox,btnBox);
this.J_PZDialog_close.remove();
},
setDialogAlert:function(){
var _this=this,
tipsTextBox=$("<div class='dialog_alert_tips'>"+this.dialogAlertTips+"</div>"),
btn=$("<div class='dialog_alert_btn'><div>确定</div></div>");
btn.click(function(){_this.closeDialog()});
this.J_PZDialog_content.append(tipsTextBox,btn);
this.J_PZDialog_close.remove();
},
createMask:function(){
this.mask=$("<div class='J_PZDialog_mask'></div>");
this.setMaskCenter();
//如果提供的参数是transparent，标识完全透明锁屏
if(this.isMask=="transparent"){
this.mask.css("opacity",0);
};
//插入到对话框的前面
this.mask.insertBefore(this.J_PZDialog).fadeIn(500);
},
setMaskCenter:function(){
this.mask.css({
width:this.getWindowSize().width+"px",
height:this.getWindowSize().height+"px"
});
},
setDialogCenter:function(){//设置弹出层居中显示
var top=(this.getWindowSize().height-this.dialogHeight-10)/2-100<0?0:(this.getWindowSize().height-this.dialogHeight-20)/2-100;
this.J_PZDialog.css({
left:(this.getWindowSize().width-this.dialogWidth-10)/2+"px",
top:top+"px"
});
},
getWindowSize:function(){//获取窗口大小
return {
width:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
height:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
};
},
closeDialog:function(){
var _this=this;
//隐藏并删除对话框
this.J_PZDialog.fadeOut("fast",function(){
_this.J_PZDialog.remove();
});
//隐藏并删除幕布
if(this.isMask){
this.mask.fadeOut("fast",function(){
_this.mask.remove();
});
};
},
addEvts:function(){//添加相关事件
var _this=this;
//给关闭按钮添加事件
this.J_PZDialog_close.click(function(){
_this.closeDialog();
});
//当窗口发生改变的时候实时设置居中
$(window).resize(function(){
//优化反复调整窗口大小带来的阻塞
window.clearTimeout(t);
var t=window.setTimeout(function(){
_this.setDialogCenter()	;
},300);
//如果开起幕布，就实时调整大小
if(_this.isMask){
_this.setMaskCenter();
};
});
//兼容ie6
if(/MSIE\s+6\.0/.test(window.navigator.userAgent)){
$(window).scroll(function(){
_this.mask.height(_this.getWindowSize().height+document.documentElement.scrollTop+"px");
_this.J_PZDialog.css("top",(_this.getWindowSize().height-_this.dialogHeight-10)/2+document.documentElement.scrollTop+"px");
});
};
},
insertDialogDOM:function(){	//创建DOM结构
this.J_PZDialog=$("<div class='J_PZDialog'></div>"),//创建弹出层最外层DOM
this.J_PZDialog_box=$("<div class='J_PZDialog_box'></div>"),//创建内测innder
this.J_PZDialog_caption=$("<div class='J_PZDialog_caption'></div>"),//创建弹出层头
this.J_PZDialog_close=$("<span class='J_PZDialog_close'>X</span>"),//创建关闭按钮
this.J_PZDialog_caption_text=$("<span class='J_PZDialog_caption_text'></span>"),//创建文本提示信息
this.J_PZDialog_content=$("<div class='J_PZDialog_content'></div>");//创建内容区域
//拼接DOM结构
this.J_PZDialog.append(this.J_PZDialog_box);
this.J_PZDialog_box.append(this.J_PZDialog_caption,this.J_PZDialog_content);
this.J_PZDialog_caption.append(this.J_PZDialog_close,this.J_PZDialog_caption_text);
//设置提示框文本
this.J_PZDialog_caption_text.text(this.dialogText);
//为了兼容IE8	一下，这里需要指定J_PZDialog_box的宽度
this.J_PZDialog_box.width(this.dialogWidth);
//设置对话框的整体宽高
this.J_PZDialog.width(this.dialogWidth);
this.J_PZDialog.height(this.dialogHeight);
//设置对话框居中显示
this.setDialogCenter();
//绑定相关事件
this.addEvts();
//插入到最底部
this.J_PZDialog.appendTo(document.body).fadeIn(500);
//如果开起幕布遮罩
if(this.isMask){
this.createMask();
};
//如果Dialog类型存在
if(this.dialogType=="alert"){
//设置alert内容
this.setDialogAlert();
}else if(this.dialogType=="confirm"){
this.setDialogConfirm();
}else if(this.dialogType=="tips"){
this.setDialogTips();
}else{
this.setDialogDef();
};
//如果配置了拖动参数
if(this.dialogDrag){
this.J_PZDialog_caption.css("cursor","move");
new PZ_DND({
handle:this.J_PZDialog_caption,
target:this.J_PZDialog
});
};
}
};
window["PZ_Dialog"]=PZ_Dialog;

/**
@基于jQuery拖放函数
@new PZ_DND({
handle:this.J_PZDialog_caption,      //指定拖动的手柄
target:this.J_PZDialog				//指定拖动的目标元素
});
@杨永
@QQ:377746756
@call:18911082352
@版本:1.0
*/
function PZ_DND(args){
var _this_=this;
//初始化参数
this.handle=args.handle;
this.target=args.target;
//绑定事件
this.handle.mousedown(function(evt){
//为了解决ie鼠标移除浏览器无法捕捉
if(this.setCapture){this.setCapture();};
evt.preventDefault();
//获取鼠标相对于拖动目标的偏移
var $this=this,
layerX=_this_.getLayerPos(evt).x,
layerY=_this_.getLayerPos(evt).y;
//注册document移动事件
$(document).mousemove(function(evt){
evt.preventDefault();
_this_.move(evt,layerX,layerY);
}).mouseup(function(){
$(this).unbind("mousemove");
$(this).unbind("mouseup");
//取消ie鼠标移除浏览器无法捕捉
if(this.releaseCapture){this.releaseCapture();};
_this_.target.css({
opacity:1
});
});
//鼠标按下拖动时的样式
_this_.target.css({
opacity:0.6
});
});

};
PZ_DND.prototype={
setTargetPos:function(left,top){
//防止因滚动条产生的距离
if(!/MSIE\s+6\.0/.test(window.navigator.userAgent)){//ie6不需要减
left=left-(document.documentElement.scrollLeft||document.body.scrollLeft);
top=top-(document.documentElement.scrollTop||document.body.scrollTop);
};
top=top<0?0:top>(this.getWindowSize().height-this.target.get(0).offsetHeight)?this.getWindowSize().height-this.target.get(0).offsetHeight:top;
left=left<0?0:left>(this.getWindowSize().width-this.target.get(0).offsetWidth)?this.getWindowSize().width-this.target.get(0).offsetWidth:left;
this.target.css({
left:left+"px",
top:top+"px"
});
},
move:function(evt,layerX,layerY){//鼠标在document上移动要执行的函数
this.setTargetPos(evt.pageX-layerX,evt.pageY-layerY);
},
getLayerPos:function(evt){//获取鼠标相对于拖动目标的偏移
return {
x:evt.pageX-this.target.offset().left,
y:evt.pageY-this.target.offset().top
};
},
getWindowSize:function(){//获取窗口大小
return {
width:document.documentElement.clientWidth||document.body.clientWidth,
height:document.documentElement.clientHeight||document.body.clientHeight
};
}
};
window["PZ_DND"]=PZ_DND;
})();

$(function(){
//默认的提示效果
$("#BT1").click(function(){
var tips=new PZ_Dialog({
width:300,		//可选参数，可以自由配置对话框的尺寸
height:115,       //可选参数，可以自由配置对话框的尺寸
text:"请输入提示信息",//可选参数，对话框的标题
tipsText:"操作成操作成操作操功操作成功功操作操作成操作操功操作成功功操操作成操作操功操作成功功功操作成功功!",//对话框提示内容
mask:0.8     //开起遮罩，并且设置遮罩的透明度
});
});
　　　　//弹出一个alert对话框
$("#BT2").click(function(){
var tips=new PZ_Dialog({
type:"alert",
width:200,
height:107,
text:"提示",
tipsText:"操作成操作操功操作成功功!",
mask:"transparent"
});
});
　　　　//弹出一个confirm对话框
$("#BT3").click(function(){
var tips=new PZ_Dialog({
type:"confirm",
height:107,
text:"模仿confirm",
tipsText:"是否继续?",
callBack:function(){         //回调函数
alert("ok");
},
mask:0.1,
isDrag:true                //开起拖动
});
});
　　　　//弹出一个3秒后自动关闭的提示框
$("#BT4").click(function(){
var tips=new PZ_Dialog({
type:"tips",
height:30,
text:"清理成功！",
mask:"transparent"
});
});
});

</script>
<button id="BT1">弹窗默认</button>
<button id="BT2">弹窗alert</button>
<button id="BT3">弹窗confirm</button>
<button id="BT4">小提示（3秒后关闭）</button>
<script type="text/javascript">