weeboxs onclick ajax,jquery弹出对话框weebox的使用demo-优快云博客

(该页面的代码，有一些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