(該頁面的代碼,有一些BUG,修改了,可下載下傳下面的demo包。仍然有點問題。)
下面總結下weeboxs 基本參數及用法使用前需包含以下jquery.js、bgiframe.js、weebox.js、weebox.css檔案。
boxid: null, //設定了此值隻後,以後在打開同樣boxid的彈窗時,前一個将被自
動關閉
boxclass: null, //給彈窗設定其它的樣式,用此可以改變彈窗的樣式
type: 'dialog', //彈窗類型,目前有dialog,error,warning,success,wee,prompt,
box六種
title: '', //彈窗标題
width: 0, //彈窗寬度,不設時,會自動依據内容改變大小
height: 0, //彈窗高度(注意是内容的高度,不是彈窗的高度)
timeout: 0, //自動關閉的秒數,設定此值後,視窗将自動關閉
draggable: true,//是否可以拖拽
modal: true, //是否顯示遮照
overlay: 75, //遮照透明度
focus: null, //彈窗打開後,焦點移到什麼元素上,預設移到取消按鈕到
position: 'center',//彈窗打開後的預設為中間,設定為element時,需要設定
trager選項,
trigger: null, //顯示位置的參照元素,為一個元素id
showTitle: true,//是否顯示标題
showButton: true,//是否顯示按鈕,包括确定和取消
showCancel: true, //是否顯示取消按鈕
showOk: true, //是否顯示确定按鈕
okBtnName: '确定',//"确定"按鈕名稱
cancelBtnName: '取消',//"取消"按鈕名稱
contentType: 'text',//内容擷取方式,目前有三種text,selector,ajax
contentChange: false,//為selector時
clickClose: false, //點選不在彈窗上時,是否關閉彈窗
zIndex: 999,//預設彈窗的層
animate: false,//效果顯示
onclose: null, //彈窗關閉時觸發的函數
onopen: null, //彈窗顯示前觸發的函數, 此時内容已經放入彈窗中,不過還沒有顯示出來
onok: null ,//點選确定按鈕後
oncancel:null //點選取消按鈕觸發函數
$.weeboxs.open('The operation failed.',{
onopen:function(){alert('opened!');},
onclose:function(){alert('closed!');}, onok:function(){alert('ok');
$.weeboxs.close();} });
$.weeboxs.open('/modules/test/testsession.php', {contentType:'ajax'});
$.weeboxs.open('hello world');
$.weeboxs.open('The operation failed.',{type:'error'});
$.weeboxs.open('The operation failed.',{type:'wee'});
$.weeboxs.open('The operation failed.',{type:'success'});
$.weeboxs.open('The operation failed.',{type:'warning'});
$.weeboxs.open('Autoclosing in 5 seconds.', { timeout: 5 });
下面是weeboxs在網頁中的基本應用:
"http://www.w3.org/TR/html4/loose.dtd">
Weebox教程一

直接顯示内容
$("#test1").click(function(){ $.weeboxs.open('這是直接顯示的内容', {title: 'Hello World'});});
$("#test1").click(function(){ $.weeboxs.open('這是直接顯示的内容', {title: 'Hello World'});});

設定彈窗的寬度和高度
$("#test7").click(function(){ $.weeboxs.open('ajax2.html', {title:'設定彈窗的寬度和高度', contentType:'ajax', width:600, height:300}); //dialog預設寬度為300,高度是自适應的});

不顯示背景遮照、不允許拖拽、自動關閉
$("#test8").click(function(){ $.weeboxs.open('不顯示背景遮照、不允許拖拽、五秒鐘後自動關閉', {title:'測試 5 秒後自動關閉', modal:false, draggable:false, timeout:5, onopen:function(box){ var closetime = parseInt(box.dt.find('b').html(),10); var handle = setInterval(function(){ alert(1); closetime--; box.dt.find('b').html(closetime+''); if (closetime<=0) clearInterval(handle); }, 1000); } });});

彈窗打開後、及關閉後的光标定位
$("#test9").click(function(){ $.weeboxs.open('ajax3.html', {title:'彈窗打開後、及關閉後的光标定位', contentType:'ajax', focus:'#focusele', blur:'.blurele'});});

修改确定和取消的按鈕名字
$("#test10").click(function(){ $.weeboxs.open('修改确定和取消的按鈕名字', {title:'修改按鈕名字', okBtnName:'儲存', cancelBtnName:'放棄'});});

不顯示某個按鈕、按鈕欄
$("#test11").click(function(){ $.weeboxs.open('不顯示标題和按鈕欄', { title:'測試', showButton:false,//不顯示按鈕欄 showOk:false,//不顯示确定按鈕 showCancel:false//不顯示取消按鈕 });});

使用IFRAME的方式為彈窗提供内容
$("#test12").click(function(){ $.weeboxs.open('http://www.baidu.com', {title:'IFRAME得到伺服器上的内容', contentType:'iframe',width:500,height:200});});

彈出框的關閉按鈕沒出來,還有待改進。
demo包在這裡。連結:http://pan.baidu.com/s/1mh3U4yc 密碼:bvif
如果你找到了解決方法,歡迎交流,謝謝!
---
2016.3.23再補充:
$(document).ready(function(){
$(".paybutton,.payLink").bind("click",function(){
$.weeboxs.open(APP_ROOT+"/index.php?ctl=payment&act=tip&id=166",
{contentType:'ajax',showButton:false,title:LANG['PAYMENT_TIP'],width:460,height:150,type:'wee'});
});
});
http://www.cnblogs.com/thinksasa/p/3582634.html