1.引入文件： 　　使用前需包含以下jquery.js、bgiframe.js、weebox.js、wee.css文件

2.基本用法举例如下:

<script type="text/javascript">

$.weeboxs.open('#testbox', {

    title: 'hello world',

    width:400,

    height: 200

});

$.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 });

</script>

3.以下是默认选项: 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 //点击确定按钮触发的函数

疑难杂症问题：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="weebox/jquery.min.js"></script>

<script type="text/javascript" src="weebox/bgiframe.js"></script>

<script type="text/javascript" src="weebox/weebox.js"></script>

<link type="text/css" rel="stylesheet" href="weebox/weebox.css" />

<script type="text/javascript">

    function get()

    {

        $.weeboxs.open('users.php', {

            title:'请选择:',

            contentType:'ajax',

            width:800,

            height:800,

            onok:function(box){

                    var text = "";

                    var sumEmail = 0;

                    var textView = "";

                    $("input[name='invitees[]']:checked").each(function() {

                        text += ","+$(this).val();

                    });

                    //$.post("1.php",{'email':text});

                    sumEmail = $("input[name='invitees[]']:checked").length;

                    $("#invite").text('共邀请'+sumEmail+'人，名单如下：');

                    $("#email").val(text);

                    textView = text.substr(1).replace(new RegExp(/(,)/g),"; ");

                    $("#emailView").html(textView);

                    //window.close();正常情况下这里这样写是可以的，但是有时候竟然要加个参数box才能点

                    //确定的时候关闭窗口。

                    box.close();

                }

        });

    }

</script>

</head>

<body>

<!-- 这里用<button onclick="get();return false;"></button>也可以，

但是在IE8,IE9下会直接把表单给提交了。《<button></button>有自动提交表单的特性》 -->

<input type="button" value="点此邀请" onclick="get();">

</body>

</html>

js弹出层插件 -- weebox的更多相关文章

  1. 在Vue中使用layer.js弹出层插件

    layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...

  2. jQuery弹出层插件popbox

    都什么年代了,还自己写弹出层插件!是的,①自己写的自己好控制②可定制性高③兼容低版本IE 本插件有以下特性: 样式分离,可定制,纯净无图片 可自定义按钮及按钮的样式.点击事件 可指定选择器选择页面元素 ...

  3. Jquery学习之路(三) 实现弹出层插件

    弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件.不多废话,直接开始吧! 不想看可以在这里直接下载源码xsPop.zip 1:遮罩层 ...

  4. 写了一个jquery的 弹出层插件。

    下载地址:http://pan.baidu.com/s/1eQ26CMm ps:ajax加载做的,要有环境才能正常运行哦! //这是一个以ajax加载显示弹出层插件  参数(option): widt ...

  5. js弹出层

    js弹出层 1.div附近显示 <div id="message"></div> $().delay().hide(); 2.遮罩层 表单提交后遮住页面,等 ...

  6. 效果非常好的 Jquery弹出层插件 jQuery Sweet alert

    介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...

  7. layer/layui弹出层插件bug

    <button class="layui-btn" lay-submit lay-filter="formDemo" id="layui-btn ...

  8. 网站开发常用jQuery插件总结(二）弹出层插件Lightbox_me

    网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...

  9. 网站开发常用jQuery插件总结(二）弹出层插件Lightbox

    网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...

随机推荐

  1. jquery mobile页面跳转后，必须重新刷新页面js方可有效

    最近在做个项目,用到jquery mobile,很陌生对他,问题一个个的来,那就要一个个解决,找了一天这个问题,放可明白:首先明白jqm里面页面跳转默认都是通过ajax请求的,必须重新刷新页面js方可 ...

  2. POJ 2299 Ultra-QuickSort 归并排序、二叉排序树，求逆序数

    题目链接: http://poj.org/problem?id=2299 题意就是求冒泡排序的交换次数,显然直接冒泡会超时,所以需要高效的方法求逆序数. 利用归并排序求解,内存和耗时都比较少, 但是有 ...

  3. bzoj 1195: [HNOI2006]最短母串 爆搜

    1195: [HNOI2006]最短母串 Time Limit: 10 Sec  Memory Limit: 32 MBSubmit: 894  Solved: 288[Submit][Status] ...

  4. 教你如何监控 Apache？

    什么是 Apache? Apache 是一款 HTTP 服务器软件,现在更名为 "http",而 Apache 则成了一个(包含httpd的项目)巨大的基金组织,根据习惯后文都用 ...

  5. 纯js将form表单的数据封装成json 以便于ajax发送

    使用方式: var json = form2Json("formId");//这里的参数是form表单的id值 form2json.js function form2Json(fo ...

  6. 【网络流24题】No. 13 星际转移问题 （网络判定 最大流）

    [题意] 由于人类对自然资源的消耗, 人们意识到大约在 2300 年之后, 地球就不能再居住了.于是在月球上建立了新的绿地,以便在需要时移民. 令人意想不到的是, 2177 年冬由于未知的原因, 地球 ...

  7. 【HDU 4352】 XHXJ's LIS （数位DP+状态压缩+LIS）

    XHXJ's LIS Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  8. 数据挖掘十大经典算法(5) 最大期望(EM)算法

    在统计计算中,最大期望(EM,Expectation–Maximization)算法是在概率(probabilistic)模型中寻找参数最大似然估计的算法,其中概率模型依赖于无法观测的隐藏变量(Lat ...

  9. C++ Prime：const的引用

    可以把引用绑定到const对象上,就像绑定到其他对象上一样,我们称之为对常量的引用.与普通引用不同的是,对常量的引用不能被用作修改它所绑定的对象: ; const int &r1 = ci; ...

  10. javascript外部使用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...