【www.gdgbn.com--jquery】

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 = "";
 $("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 = $(""+settings.asktext+"

确认  取消

");
  }else if(settings.remind){
   settings.main = $(""+settings.remindtext+"

确认");
  }else{
   that.show();
   settings.main = that;
  }
  var wrap = ""+settings.title+""+settings.shut+"";
  //加载内容 
  if($("#wrapout").length){//防止二次加载
   if(!$("#blank").length && settings.bg){
    $("body").prepend("");
   }
   $("#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(""); 
    $("#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     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代码如下：

改变我的值

本文来源：http://www.gdgbn.com/wangyezhizuo/28959/