weebox弹窗

<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" />

 

1.直接显示内容：

<script type="text/javascript">
$("#test1").click(function(){
 $.weeboxs.open('这是直接显示的内容', {title: 'Hello World'});
});
</script>

 

2.弹窗的Alter类型：

<script type="text/javascript">
$("#test2").click(function(){
 $.weeboxs.open('Sorry,这个操作不允许!', {title: '提示', type:'alert'});
});
</script>

 

3.打开、确定、取消、关闭的事件：

<script type="text/javascript">
$("#test3").click(function(){
 $.weeboxs.open('弹窗事件测试？', {
  title:'提示',
  onopen:function(box) {
   alert('取得内容后，显示弹窗前。');
  },
  onok:function(box){
   alert('点击确定按钮后!');
   box.close();//增加事件方法后需手动关闭弹窗
  },
  oncancel:function(box){
   alert('点击取消按钮后！');
   box.close();//增加事件方法后需手动关闭弹窗
  },
  onclose:function(box){
   alert('弹窗关闭前');
  }
 });
});
</script>

 

4.使用jQuery的选择器为弹窗提供内容：

<script type="text/javascript">
$("#test4").click(function(){
 $.weeboxs.open('#boxcontent', {title:'提示'});
});
$("#test5").click(function(){
 $.weeboxs.open('.boxcontent', {title:'提示',contentType:'selector'});
});
</script>

 

5.使用Ajax的方式为弹窗提供内容：

<script type="text/javascript">
$("#test6").click(function(){
 $.weeboxs.open('ajax1.html', {title:'AJAX得到服务器上的内容', contentType:'ajax',width:400});
});
</script>

 

6.设置弹窗的宽度和高度：

<script type="text/javascript">

$("#test7").click(function(){
 $.weeboxs.open('ajax2.html', {title:'设置弹窗的宽度和高度', contentType:'ajax', width:600, height:300});
});

</script>

 

7.不显示背景遮照、不允许拖拽、自动关闭：

<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>

 

8.修改确定和取消的按钮名字：

<script type="text/javascript">
$("#test10").click(function(){
 $.weeboxs.open('修改确定和取消的按钮名字', {title:'修改按钮名字', okBtnName:'保存', cancelBtnName:'放弃'});
});
</script>

 

9.不显示某个按钮、按钮栏：

<script type="text/javascript">
$("#test11").click(function(){
 $.weeboxs.open('不显示标题和按钮栏', {
  title:'测试',
  showButton:false,//不显示按钮栏
  showOk:false,//不显示确定按钮
  showCancel:false//不显示取消按钮  
 });
});
</script>

 

10.使用IFRAME的方式为弹窗提供内容:

<script type="text/javascript">
$("#test12").click(function(){
 weeboxDialog=$.weeboxs.open('http://www.baidu.com#jQuery.weebox.iframedialog.html', {title:'IFRAME得到服务器上的内容', contentType:'iframe',width:500,height:200}); 
});
</script>