天天看點

weeboxs onclick ajax,jquery彈出對話框weebox的使用demo直接顯示内容設定彈窗的寬度和高度不顯示背景遮照、不允許拖拽、自動關閉彈窗打開後、及關閉後的光标定位修改确定和取消的按鈕名字不顯示某個按鈕、按鈕欄使用IFRAME的方式為彈窗提供内容

(該頁面的代碼,有一些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教程一                   

weeboxs onclick ajax,jquery彈出對話框weebox的使用demo直接顯示内容設定彈窗的寬度和高度不顯示背景遮照、不允許拖拽、自動關閉彈窗打開後、及關閉後的光标定位修改确定和取消的按鈕名字不顯示某個按鈕、按鈕欄使用IFRAME的方式為彈窗提供内容

直接顯示内容

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

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

weeboxs onclick ajax,jquery彈出對話框weebox的使用demo直接顯示内容設定彈窗的寬度和高度不顯示背景遮照、不允許拖拽、自動關閉彈窗打開後、及關閉後的光标定位修改确定和取消的按鈕名字不顯示某個按鈕、按鈕欄使用IFRAME的方式為彈窗提供内容

設定彈窗的寬度和高度

$("#test7").click(function(){        $.weeboxs.open('ajax2.html', {title:'設定彈窗的寬度和高度', contentType:'ajax', width:600, height:300});        //dialog預設寬度為300,高度是自适應的});      
weeboxs onclick ajax,jquery彈出對話框weebox的使用demo直接顯示内容設定彈窗的寬度和高度不顯示背景遮照、不允許拖拽、自動關閉彈窗打開後、及關閉後的光标定位修改确定和取消的按鈕名字不顯示某個按鈕、按鈕欄使用IFRAME的方式為彈窗提供内容

不顯示背景遮照、不允許拖拽、自動關閉

$("#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);                }        });});      
weeboxs onclick ajax,jquery彈出對話框weebox的使用demo直接顯示内容設定彈窗的寬度和高度不顯示背景遮照、不允許拖拽、自動關閉彈窗打開後、及關閉後的光标定位修改确定和取消的按鈕名字不顯示某個按鈕、按鈕欄使用IFRAME的方式為彈窗提供内容

彈窗打開後、及關閉後的光标定位

$("#test9").click(function(){        $.weeboxs.open('ajax3.html', {title:'彈窗打開後、及關閉後的光标定位', contentType:'ajax', focus:'#focusele', blur:'.blurele'});});      
weeboxs onclick ajax,jquery彈出對話框weebox的使用demo直接顯示内容設定彈窗的寬度和高度不顯示背景遮照、不允許拖拽、自動關閉彈窗打開後、及關閉後的光标定位修改确定和取消的按鈕名字不顯示某個按鈕、按鈕欄使用IFRAME的方式為彈窗提供内容

修改确定和取消的按鈕名字

$("#test10").click(function(){        $.weeboxs.open('修改确定和取消的按鈕名字', {title:'修改按鈕名字', okBtnName:'儲存', cancelBtnName:'放棄'});});      
weeboxs onclick ajax,jquery彈出對話框weebox的使用demo直接顯示内容設定彈窗的寬度和高度不顯示背景遮照、不允許拖拽、自動關閉彈窗打開後、及關閉後的光标定位修改确定和取消的按鈕名字不顯示某個按鈕、按鈕欄使用IFRAME的方式為彈窗提供内容

不顯示某個按鈕、按鈕欄

$("#test11").click(function(){        $.weeboxs.open('不顯示标題和按鈕欄', {                title:'測試',                showButton:false,//不顯示按鈕欄                showOk:false,//不顯示确定按鈕                showCancel:false//不顯示取消按鈕        });});      
weeboxs onclick ajax,jquery彈出對話框weebox的使用demo直接顯示内容設定彈窗的寬度和高度不顯示背景遮照、不允許拖拽、自動關閉彈窗打開後、及關閉後的光标定位修改确定和取消的按鈕名字不顯示某個按鈕、按鈕欄使用IFRAME的方式為彈窗提供内容

使用IFRAME的方式為彈窗提供内容

$("#test12").click(function(){        $.weeboxs.open('http://www.baidu.com', {title:'IFRAME得到伺服器上的内容', contentType:'iframe',width:500,height:200});});      
weeboxs onclick ajax,jquery彈出對話框weebox的使用demo直接顯示内容設定彈窗的寬度和高度不顯示背景遮照、不允許拖拽、自動關閉彈窗打開後、及關閉後的光标定位修改确定和取消的按鈕名字不顯示某個按鈕、按鈕欄使用IFRAME的方式為彈窗提供内容

彈出框的關閉按鈕沒出來,還有待改進。

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