js 彈出框外掛程式執行個體與代碼使用方法

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>&nbsp;&nbsp;<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>