js弹出层插件 -- weebox

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>
时间: 2024-10-13 08:51:56

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

实用带多种CSS动画特效的jQuery弹出层插件hDialog.js

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel=&qu

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

弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件.不多废话,直接开始吧! 不想看可以在这里直接下载源码xsPop.zip 1:遮罩层 要弹出层,先要用一个遮罩层挡在下面的页面,此遮罩层是全屏的,页面滚动也要有,所以设置 position: fixed;还要有透明效果,下面是我定义的遮罩层css,取名mask .mask { position: fixed; width: 100%; height: 100%; backgroun

jquery 弹出层插件fancybox和放大镜插件cloud-zoom

这两天做了一个网上的项目,其实也不是自己做的,嘿嘿,现在就来说说我对这个小页面效果代码的理解代码下载 1.添加javascript引用和CSS文件的引用 //js代码的引用<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script src="fancybox/jquery.easing-1.3

原创弹出层插件,支持各类型内容,支持回调函数

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> <meta name="apple-mobile-web-app-

jQuery制作信息提示弹出层插件【推荐】

给大家分享一款非常实用的弹窗提示窗口插件,包含多种模式.带有回执函数值的功能.?1. [代码][JavaScript]代码 <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><!--[if IE 6]><script type="text/javascript" src="js/iepngfix_tilebg

layer/layui弹出层插件bug

<button class="layui-btn" lay-submit lay-filter="formDemo" id="layui-btn" type="submit">立即提交</button> 使用layer/layui弹出层插件,type="submit"时,弹出层失效,改为type="button"时正常弹出;

div+js 弹出层

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery弹出层效果</title> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background

一个JS弹出层用户登录效果

<html> <head> <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/> <title>接触角测定仪 http://www.dgshengding.com</title> <style> body,#Mdown{margin: 0;padding: 0;text-align: center;font: n

Js弹出层,弹出框代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ