js 弹出框插件实例与代码使用方法
使用方法：
1. 调用jquery库以及zxxbox插件文件，如下代码：
<script type="text/网页特效" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><script type="text/javascript" src="/study/js/jquery.zxxbox.2.0.js"></script>
2. 调用zxxbox()方法，最简单的使用如下：
$("#test").zxxbox();
所产生的效果就是：id为"test"的元素被装载到盒子中并在页面的中央显示出来了。
四、插件api使用与说明（不可错过）
jquery弹出框插件 zxxbox 参数使用说明
标题 描述 默认
title 字符串 对话框的标题文字 对话框
shut 字符串 右上角关闭按钮的显示 ×
bar 布尔型 是否显示标题栏，例如在装载图片时可以使用 true
closeable 布尔型 点击背景层（如果有）是否关闭对话框 true
fix 布尔型 弹出框是否位置固定，不随滚动条滚动（ie6无效） false
bg 布尔型 是否显示背景层 true
drag 布尔型 是否可以点击标题栏拖拽 false
index 数值 对话框的z-index层级 2000
opacity 数值 黑色半透明背景的透明度 0.5
ask 布尔型 是否使用默认的问答对话框显示 false
remind 布尔型 是否以默认的内容提醒方式显示 false
asktext 字符串 默认问答显示时提示的内容 您确认执行此操作？
remindtext 字符串 默认提醒时提醒的内容 您尚未输入提醒的内容。
delay 数值 定时关闭的时间，0为不关闭，大于0为关闭时间，单位毫秒 0
closeo教程bject 对象或对象数组 绑定对话框关闭事件的对象 [] - 空数组
一些补充的说明：
默认对话框的按钮样式已经用css教程表示，如果您不满意，可以修改原js的css字符串部分。
对于触发默认的"ask"或"remind"对话框，使用任意的存在的对象触发就可以了，例如您可以使用$("body").zxxbox({ask: true});
如果使用"ask"参数，实现默认的对话框提示效果，则提供的"确认"按钮的id为"surebtn"，您可以使用$("#surebtn")为这个按钮绑定相关事件，需要注意的事，此事件需放在弹出对话框的事件函数内部。
对于"delay"参数，这里的策略是，如果大小为0，则认为是不执行延时自动关闭功能，否则将以毫秒为单位进行对话框的自动关闭
对于"closeobject"参数，用于绑定用于关闭的按钮，默认绑定的有半透明背景（如果closeable为true），右上角关闭按钮，默认（或id为cancelbtn）的取消按钮，您可以使用此参数绑定其他可以触发关闭对话框的按钮，例如：{closeobject: [$(".a"), $(".b")]}则所有含有a以及含有b的class类的按钮点击后，对话框都会关闭
插件没有提供很好的回调关闭时间，您可以使用类似$("#test").zxxbox({delay:10});的代码触发关闭事件(delay是关键，$("#test")是当前装载对象)。
五、比较综合的使用实例（给新手看）
使用的js代码如下：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><script type="text/javascript" >
// zxxbox.js v1.0 2010-03-20
// 2010 by zhangxinxu http://www.zhangxinxu.com/
// v1.1 2010-04-03 #添加拖拽参数
// v1.2 2010-07-12 #修改浏览器高宽以及页面滚动高度获取方法(function($){
//给页面装载css样式
var css = '<style type="text/css">#blank{position:absolute; z-index:2000; left:0; top:0; width:100%; height:0; background:black;}.wrap_out{position:absolute; padding:5px; background:#eee; z-index:2000;}.wrap_in{background:#fafafa; border:1px solid #ccc;}.wrap_bar{width:100%; background:#f7f7f7; border-top:3px solid #f9f9f9; border-bottom:3px solid #eeeeee; margin-top:2px;}.wrap_title{line-height:4px; background:#f3f3f3; border-top:4px solid #f5f5f5; border-bottom:5px solid #f1f1f1; margin-top:3px;}.wrap_title span{position:relative; margin-left:10px;}.wrap_body{border-top:1px solid #ddd; background:white;}.wrap_close{color:#34538b; float:right; font-weight:bold; margin-right:10px; margin-top:-15px; font-family:black arial; text-decoration:none;}.wrap_close:hover{text-decoration:none; color:#f30;}.wrap_remind{width:16em; padding:30px 40px 20px;}.wrap_remind p{margin:20px 0 0;}.submit_btn{display:-moz-inline-stack; display:inline-block; padding:3px 12px 1.99px; background:#486aaa; border:1px solid; border-color:#a0b3d6 #34538b #34538b #a0b3d6; color:#f3f3f3; line-height:16px; cursor:pointer; overflow:visible;}.submit_btn:hover{text-decoration:none; color:#ffffff;}.cancel_btn{display:-moz-inline-stack; display:inline-block; padding:3px 12px 1.99px; background:#eee; border:1px solid; border-color:#f0f0f0 #bbb #bbb #f0f0f0; color:#333; line-height:16px; cursor:pointer; overflow:visible;}</style>';
$("head").append(css);$.fn.zxxbox = function(options){
var that = $(this);
options = options || {};
var defaults = {
title: "对话框",
shut: "×",
bar: true,
closeable: true,
fix: false,
bg: true,
drag: false,
index: 2000,
opacity: 0.5,
ask: false,
remind: false,
asktext: "您确认执行此操作？",
remindtext: "您尚未输入提醒的内容。",
delay: 0,
closeobject: []
};
var settings = $.extend({}, defaults, options);
//如果是简单的对话框或文字提醒
if(settings.ask){
settings.main = $('<div class="wrap_remind">'+settings.asktext+'<p><button id="surebtn" class="submit_btn">确认</button> <button id="cancelbtn" class="cancel_btn">取消</button></p></div>');
}else if(settings.remind){
settings.main = $('<div class="wrap_remind">'+settings.remindtext+'<p><button id="submitbtn" class="submit_btn">确认</button</p></div>');
}else{
that.show();
settings.main = that;
}
var wrap = '<div id="blank"></div><div class="wrap_out" id="wrapout"><div class="wrap_in" id="wrapin"><div id="wrapbar" class="wrap_bar"><div class="wrap_title"><span>'+settings.title+'</span></div><a href="javasctipt:void(0);" class="wrap_close" id="wrapclose">'+settings.shut+'</a></div><div class="wrap_body" id="wrapbody"></div></div></div>';
//加载内容
if($("#wrapout").length){//防止二次加载
if(!$("#blank").length && settings.bg){
$("body").prepend('<div id="blank"></div>');
}
$("#wrapout").show();
}else{
$("body").prepend(wrap);
$("#wrapbody").append(settings.main);
if(!settings.bar){
$("#wrapbar").hide();
}
//对黑色背景进行一些处理
$("#blank").each(function(){
//首先判断页面的高度，如果页面高度小于浏览器显示区域的高度，则使用浏览器显示区域的高度
settings.cheight = $(window).height();
settings.cwidth = $(window).width(); //浏览器显示区域宽度
settings.bgheight = ($("body").height() > settings.cheight)? $("body").height() : settings.cheight;
//判断是否显示背景
if(settings.bg){
$(this).css({
zindex: settings.index,
opacity: settings.opacity,
height: settings.bgheight,
width: "100%"
});
}else{
$(this).remove();
}
});
//弹出框的居中定位
$("#wrapout").each(function(){
//获取弹出内容的高度以及宽度
$("body").append('<div id="wrapclone" style="position:absolute; left:-3000px;"></div>');
$("#wrapclone").append(settings.main.clone());
var w = $("#wrapclone").width() + 2, h = $(this).height();
var stop = $(document).scrolltop();
var t = stop + (settings.cheight - h)/2, l = (settings.cwidth - w) / 2 ;
$(this).css({
width: w,
height: h,
left: l,
top: t,
zindex: settings.index
});
if(settings.fix && window.xmlhttprequest){
$(this).css("position","fixed");
}
$("#wrapclone").remove();
});
//拖拽
if(settings.drag){
var drag = false;
var currentx = 0, currenty=0, posx = $("#wrapout").css("left"), posy = $("#wrapout").css("top");
$("#wrapbar").mousedown(function(e){
drag = true;
document.getelementbyid("wrapout").onselectstart = function(){
return false;
}
currentx = e.clientx;
currenty = e.clienty;
});
$(document).mousemove(function(e){
if(drag){
var nowx = e.clientx, nowy = e.clienty;
var disx = nowx - currentx, disy = nowy - currenty;
$("#wrapout").css("left", parseint(posx) + disx);
$("#wrapout").css("top", parseint(posy) + disy);
}
});
$(document).mouseup(function(){
drag = false;
posx = $("#wrapout").css("left");
posy = $("#wrapout").css("top");
});
}
}
//一些点击事件的处理，也就是与隐藏
var wraphidden = function(){
if(!settings.ask && !settings.remind){
settings.main.hide().appendto($("body"));
}
$("#wrapout").remove();
if($("#blank").length){
$("#blank").remove();
}
return false;
};
//点击隐藏的元素有：关闭按钮，黑色背景(默认)，确定于取消按钮
$("#wrapclose").bind("click",wraphidden).each(function(){
if(settings.shut !== "×"){
$(this).css("font","12px/14px normal arial");
}
});
$("#submitbtn").bind("click",wraphidden);
$("#cancelbtn").bind("click",wraphidden);
if(settings.closeable){
$("#blank").bind("click",wraphidden);
}
//如果自动定时关闭
if(parseint(settings.delay)){
settimeout(wraphidden, settings.delay);
}
//提供关闭的接口
if(settings.closeobject.length){
var l = settings.closeobject.length;
for(var i=0; i<l; i+=1){
settings.closeobject[i].bind("click",wraphidden);
}
}
};
})(jquery);</script>
<script type="text/javascript">$(function(){
$("#test").click(function(){
$(this).zxxbox({
ask: true,
asktext: "您确认改变此按钮的显示的值吗？",
fix: true,
closeable: false
});
$("#surebtn").click(function(){
$("#test").text("我的值已经改变了，对话框将自动消失！");
alert("修改成功！点击此确定后，对话框2秒钟消失");
$(this).zxxbox({delay: 2000});
});
});
});
</script>
html代码如下：
<button id="test">改变我的值</button>