jeBox是一款备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。她不依赖任何的第三方库，纯原生JS开发的。
您可以免费将她用于任何个人项目。但是不能去除头部信息。 QQ群：516754269

浏览器兼容

此兼容，是根据我使用的一些js方法函数的支持情况来判断的。设备过少，下面的我们的主要兼容目标

1、Internet Explorer >=8 (Windows)
2、Safari (Mac)
3、Chrome (Windows, Mac, iOS, Linux, Chrome OS)
4、Firefox (Windows, Mac, Linux, Firefox OS)
5、谷歌内核浏览器，如360浏览器，搜狗浏览器，QQ浏览器

实例演示

初体验 询问层 提示层 页面层 捕获页 iframe层 iframe窗 加载层 loading层

//初体验
var icon = 0;
(function changeIcon(){
  var idxs = jeBox.alert('Hi，你好！ 点击确定更换图标', {
    icon: icon,
    maskClose: true,
    title: icon === 0 ? '初体验 - jeBox 1.0' : 'icon：'+icon + ' - jeBox 1.0'
  }, function(idx){
      jeBox.close(idx);
      changeIcon();
  });
  if(9 === ++icon) jeBox.close(idxs);
}());

//询问层
jeBox.open({
    cell:"jbx",
    title:"你的选择",
    area:["400px","150px"],
    content:'您是如何看待前端开发？',
    masklock : true ,
    button: [ {name: '重要'},{name: '奇葩'}],
    yesfun: function(index){ 
        jeBox.msg('的确很重要', {icon: 2,time:2});
        jeBox.close(index);
    },
    nofun:function(){
        jeBox.msg('也可以这样认为', {icon: 1,time:10,button:[{name:"确定"},{name:"取消"}]});
    }
})

//提示层
jeBox.msg('我就是要提示！');

//页面层
jeBox.open({
    area:["400px","240px"],
    content:'
即直接给content传入html字符
当内容宽高超过定义宽高，会自动出现滚动条。










很高兴在下面遇见你
',
    masklock : true
})

//捕获页
jeBox.open({
    area:["400px","250px"],
    content: document.getElementById("notice"),
    masklock : true
})

//iframe层
jeBox.open({
    title:"mBox mobile页",
    type:2,
    padding:"0",
    area:["450px","80%"],
    content: "http://www.jayui.com/mbox/",
    masklock : true
})

//iframe窗
jeBox.open({
    title:"很多时候，我们想最大化看，比如像这个页面",
    type:2,
    maxBtn:true,
    padding:"0",
    area:["80%","80%"],
    content: ["http://www.jayui.com/","no"],
    masklock : true
})

//加载层
var er = jeBox.loading(1,"玩命加载中");
setTimeout(function(){
    jeBox.close(er)
}, 5000);

//loading层
var san = jeBox.loading(2,"Loading...");
setTimeout(function(){
    jeBox.close(san)
}, 5000);

再探深处

信息框

信息框-例1 信息框-例2 信息框-例3 信息框-例4

页面层/iframe层

页面层-自定义 iframe-子父操作 iframe-多媒体 iframe-禁滚动条

加载层

加载风格1 加载风格2 加载风格3 加载风格4

//信息框-例1
jeBox.alert('见到你真的很高兴', {icon: 7});
//信息框-例2
jeBox.msg('你确定你很帅么？', {
    time: 0 ,
    button: [ {name: '必须啊'},{name: '丑到爆'}],
    boxStyle:{background:"#333",  border:"1px solid #333", "border-radius":"4px", color:"#fff",opacity:"0.93", filter:"alpha(opacity=90)"},
    yesfun: function(index){
        jeBox.close(index);
        jeBox.msg('雅蠛蝶 O.o', { icon: 7 });
    }
});
//信息框-例3
jeBox.msg('这是最常用的吧');
//信息框-例4
jeBox.msg('不开心。。', {icon: 6});


//页面层-自定义
jeBox.open({
    title:false,
    closeBtn:false,
    maskClose:true,
    area:["450px","250px"],
    content: "自定义HTML内容",
    boxStyle:{background:"#81BA25",  border:"1px solid #81BA25", "border-radius":"4px", color:"#fff"}
})
//iframe-子父操作
jeBox.open({
  type: 2,
  area: ['700px', '530px'],
  maxBtn: true,
  scrollbar: false,
  content: 'iframe.html'
});
//iframe-多媒体
jeBox.open({
    title:false,
    closeBtn:false,
    type:2,
    padding:"0",
    area:['630px', '360px'],
    content: "http://player.youku.com/embed/XMTI4MTE1NTY0MA",
    maskClose:true
})
jeBox.msg('点击任意处关闭');
//iframe-禁滚动条
jeBox.open({
    title:"禁滚动条",
    type:2,
    padding:"0",
    area:["450px","80%"],
    content: ["http://www.jayui.com/mbox/","no"],
    masklock : true
})


//加载风格1
var one = jeBox.loading(1);
setTimeout(function(){
    jeBox.close(one)
}, 3000);
//加载风格2
jeBox.loading(1,"玩命加载中",{time:3});
//加载风格3
jeBox.loading(2,"加载中...",{time:3});
//加载风格4
jeBox.loading(3,"Loading...",{time:3});