1、为了能更好体验,您可通过Chrome设备模式浏览。或手机扫右边的二维码进入

2、mBox是为移动设备(手机、平板等webkit内核浏览器/webview)量身定做的弹层插件,插件采用JavaScript编写,您需要按照场景选择使用。插件开源、体积小、简单实用、功能强大,是你架构移动终端网站的重要选择!

3、苹果:完美兼容ios系统(已测试ios5/6/7/8/9,机型包括ip4、ip4s、ip5、ip6等)

4、安卓:兼容,尚未发现问题(已测试android2.34/2.35/4.0x/4.1x等,机型包括小米1/2、HTC One、三星GALAXY、索尼Xperia、小辣椒等)

GitHub下载:github.com/singod/mbox

官网下载:mbox.zip

下载次数:..

官网下载: mbox2.3.zip mbox2.3演示

mBox弹层演示

boxtype弹层的类型, 1为(提示框,信息框,询问框), 2为(页面层), 3为(加载条)

提示框(1) 信息框(1) 询问框(1) 页面层(2) 加载条(3)

核心方法:mBox(options)

options是一个对象,它包含了以下key: '默认值'
width:"",  // 弹层的宽度,可用是百分比,可用是如(320px)
height:"",  // 弹层的高度,可用是百分比,可用是如(320px)
boxtype:0,  //弹层的类型
title:[],  // 标题可以有2个参数,例如 ["标题","color:#fff"],如果title:[]参数为空,不显示标题
content:"请稍等,暂无内容!",  // 内容	
conStyle:"background-color:#fff;", //内容框的css样式,你可以写更多样式
btnName:[],  // 是否显示按钮  确定:"\u786E\u5B9A", 取消:"\u53D6\u6D88"
btnStyle:[],  //按钮CSS样式
yesfun:null,  // 确定按钮回调函数
nofun:null,  // 取消按钮回调函数
closefun:null,  // 右上角关闭取消按钮回调函数
closeBtn:[ false, 1 ],  // 参数一是否显示右上角关闭取消按钮,默认false,参数二按钮颜色 1是黑色,2是白色
time:null,  // 自动关闭时间(毫秒)
fixed:true,  // 是否静止定位
mask:true,  //是否显示遮罩层
maskClose:true,  // 点击遮罩层是否关闭,默认true
maskColor:"rgba(0,0,0,0.5)",  // 遮罩层颜色可以是rgba也可以是rgb
margin:"10px 10px",
zIndex:1e4,  // 层级关系
success:null,  //层成功弹出层的回调函数,返回一个参数为当前层元素对象
endfun:null   //层彻底销毁后的回调函

各类调用代码

调用方式:jemBox.open(options)   或    mBox.open(options)   或    $M.open(options)
/** 以下是调用代码(此处不展示事件绑定)*/
//提示框
mBox.open({
    content: '您好',
    time: 2 //2秒后自动关闭
});
//信息框
mBox.open({
    title: ['信息','border-bottom: 1px solid #EBEBEB;'],
    content: '移动版和PC版不能同时使用在同一页面。'
});
//询问框
mBox.open({
    title: ['提示','border-bottom: 1px solid #EBEBEB;'],
    content: '您确定要刷新一下本页面吗?',
    btnName: ['嗯', '不要'],
    yesfun: function(index){
        location.reload();
        mBox.close(index);
    }
});
//页面层
mBox.open({
    boxtype: 2,
    content: '可传入任何内容,支持html。一般用于手机页面中',
    conStyle: 'position:fixed; bottom:0; left:0; width:100%; height:150px; padding:10px 0; border:none;'
});
//加载层
mBox.open({
    boxtype: 3,
    conStyle: 'text-align:center;',
    maskColor:"rgba(0,0,0,0.8)",
    time: 6,
    content: '<div class="jemboxloadspin"><div class="jemboxloading"></div></div><p style="line-height:20px;">加载测试中</p>'
});

注意事项

mBox 弹层插件不对iframe提供支持

功能演示

普通信息框,并设置2秒自动关闭:

jemBox.open({
    content: '通过conStyle设置你想要的样式',
    conStyle: 'background-color:#09C1FF; color:#fff; border:none;',
    time: 2
});
运行

提示框,并自定义标题风格:

$M.open({
    title: [
        '我是标题',
        'background-color:#0099CC; color:#fff;'
    ],
    closeBtn:[ true, 2 ],
    content: '标题风格任你定义。。'
    
});
运行

提示框,并显示1个按钮:

$M.open({
    content: '通过conStyle设置你想要的样式',
    btnName: ['OK']
});
运行

询问框,并显示2个按钮,不允许点遮罩关闭:

mBox.open({
    content: '你是想确认呢,还是想取消呢?',
    btnName: ['确认', '取消'],
    maskClose: false,
    yesfun: function(){
        mBox.open({content: '你点了确认', time: 1});
    }, nofun: function(){
        mBox.open({content: '你选择了取消', time: 1});
    }
});

运行

内容设置:

类型:String/DOM,content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM

1、当content为String时,接受并展现字符串型的内容

1、当content为DOM时,接受的是一段html片段并展现html片段的内容

//如果是页面层

mBox.open({
    boxtype: 1, 
    content: '传入任意的文本或html' //这里content是一个普通的String
});

//html片段
大家好!我就是html片段了
mBox.open({ boxtype: 1, content: mBox.cell("#piand") //mBox.cell(elem),elem可以是ID\CLASS\TAG等 //这里content是一个DOM }); //Ajax获取 $.post('url', {}, function(str){ mBox.open({ boxtype: 1, content: str //注意,如果str是object,那么需要字符拼接。 }); }); 运行页面层 运行DOM-html片段

页面层,全屏:

mBox.close(idx); //idx为你调用mBox时返回的索引

mBox.closeAll(); // 它将关闭所有层

var pageii = mBox.open({
    boxtype: 2,
    content: html,
    conStyle: 'position:fixed; left:0; top:0; width:100%; height:100%; border:none;background-color:#fff;'
});
运行

结语

例子毕竟只是带你入门,我们更希望你认真去阅读文档手册,那里列举了mBox所有的接口,它们会帮助你完成形。

Powered by jayui.com ©2015-2016