jquery弹出对话框weebox的使用demo
转载自：http://www.aspku.com/yunying/jingyan/3172.html
（该页面的代码，有一些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在网页中的基本应用：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Weebox教程一</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../src/jquery.js"></script>
<script type="text/javascript" src="../src/bgiframe.js"></script>
<script type="text/javascript" src="../src/weebox.js"></script>
<link type="text/css" rel="stylesheet" href="../src/weebox.css" />
</head>
<body>
<img alt="" src="demo.jpg">
<h1>直接显示内容<input type="button" id="test1" value="演示[id=test1]"></h1>
<pre>
$("#test1").click(function(){
$.weeboxs.open('这是直接显示的内容', {title: 'Hello World'});
});
</pre>
<script>
$("#test1").click(function(){
$.weeboxs.open('这是直接显示的内容', {title: 'Hello World'});
});
</script>
<img alt="" src="demo.jpg">
<script type="text/javascript">
$("#test6").click(function(){
$.weeboxs.open('ajax1.html', {title:'AJAX得到服务器上的内容', contentType:'ajax',width:400});
});
</script>
<hr>
<h1>设置弹窗的宽度和高度<input type="button" id="test7" value="演示[id=test7]"></h1>
<pre>
$("#test7").click(function(){
$.weeboxs.open('ajax2.html', {title:'设置弹窗的宽度和高度', contentType:'ajax', width:600, height:300});
//dialog默认宽度为300,高度是自适应的
});
</pre>
<img alt="" src="demo.jpg">
<script type="text/javascript">
$("#test7").click(function(){
$.weeboxs.open('ajax2.html', {title:'设置弹窗的宽度和高度', contentType:'ajax', width:600, height:300});
});
</script>
<hr>
<h1>不显示背景遮照、不允许拖拽、自动关闭<input type="button" id="test8" value="演示[id=test8]"></h1>
<pre>
$("#test8").click(function(){
$.weeboxs.open('不显示背景遮照、不允许拖拽、五秒钟后自动关闭', {title:'测试<b>5</b>秒后自动关闭', 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);
}
});
});
</pre>
<img alt="" src="demo.jpg">
<script type="text/javascript">
$("#test8").click(function(){
$.weeboxs.open('不显示背景遮照、不允许拖拽、五秒钟后自动关闭', {
title:'测试<font color="red">5</font>秒后自动关闭',
modal:false,//默认为true
draggable:false,//默认为true
timeout:5, //默认为0
onopen:function(box){
var closetime = parseInt(box.dt.find('font').html(),10);
var handle = setInterval(function(){
closetime--;
box.dt.find('font').html(closetime);
if (closetime<=0) clearInterval(handle);
}, 1000);
}
});
});
</script>
<hr>
<h1>弹窗打开后、及关闭后的光标定位<input type="button" id="test9" value="演示[id=test9]"></h1>
<pre>
$("#test9").click(function(){
$.weeboxs.open('ajax3.html', {title:'弹窗打开后、及关闭后的光标定位', contentType:'ajax', focus:'#focusele', blur:'.blurele'});
});
</pre>
<img alt="" src="demo.jpg">
<script type="text/javascript">
$("#test9").click(function(){
$.weeboxs.open('ajax3.html', {title:'弹窗打开后、及关闭后的光标定位', contentType:'ajax', focus:'#focusele', blur:'.blurele'});
});
</script>
<input type="text" size="40" class="blurele" value="弹窗关闭后光标定位到这儿">
<hr>
<h1>修改确定和取消的按钮名字<input type="button" id="test10" value="演示[id=test10]"></h1>
<pre>
$("#test10").click(function(){
$.weeboxs.open('修改确定和取消的按钮名字', {title:'修改按钮名字', okBtnName:'保存', cancelBtnName:'放弃'});
});
</pre>
<img alt="" src="demo.jpg">
<script type="text/javascript">
$("#test10").click(function(){
$.weeboxs.open('修改确定和取消的按钮名字', {title:'修改按钮名字', okBtnName:'保存', cancelBtnName:'放弃'});
});
</script>
<hr>
<h1>不显示某个按钮、按钮栏<input type="button" id="test11" value="演示[id=test11]"></h1>
<pre>
$("#test11").click(function(){
$.weeboxs.open('不显示标题和按钮栏', {
title:'测试',
showButton:false,//不显示按钮栏
showOk:false,//不显示确定按钮
showCancel:false//不显示取消按钮
});
});
</pre>
<img alt="" src="demo.jpg">
<script type="text/javascript">
$("#test11").click(function(){
$.weeboxs.open('不显示标题和按钮栏', {
title:'测试',
showButton:false,//不显示按钮栏
showOk:false,//不显示确定按钮
showCancel:false//不显示取消按钮
});
});
</script>
<hr>
<h1>使用IFRAME的方式为弹窗提供内容<input type="button" id="test12" value="演示[id=test12]"></h1>
<pre>
$("#test12").click(function(){
$.weeboxs.open('http://www.baidu.com', {title:'IFRAME得到服务器上的内容', contentType:'iframe',width:500,height:200});
});
</pre>
<img alt="" src="demo.jpg">
<script type="text/javascript">
var weeboxDialog;
$("#test12").click(function(){
weeboxDialog=$.weeboxs.open('http://www.baidu.com#jQuery.weebox.iframedialog.html', {title:'IFRAME得到服务器上的内容', contentType:'iframe',width:500,height:200});
});
function closeIframeDialog() {
//$.weeboxs.close(); 此方法失效?
weeboxDialog.close();
}
</script>
<hr>
</body>
弹出框的关闭按钮没出来，还有待改进。
demo包在这里。链接：http://pan.baidu.com/s/1mh3U4yc 密码：bvif
如果你找到了解决方法，欢迎交流，谢谢！