layer

一款实用的web提示框架！下面是实用这款框架的实例

html代码

<p class='layer_notice'>我们是否是好惹的</p>
<input type="button" value='弹框'   class="alert" />
<br/>
<input type="button" value='提示层'  class="tips" />
<br/>
<input type="button" value='捕获页'  class="catch" />
<br/>
<input type="button" value='页面层'  class="page" />
<br/>
<input type="button" value='自定义'  class="self" />
<br/>
<input type="button" value='tips'  class="tp" />
<br/>
<input type="button" value='iframe'  class="iframe" />
<br/>
<input type="button" value='load'  class="load" />

javascript

//第三方扩展皮肤
$('#alert').click(function(){
    layer.alert('内容', {
       icon: 1,                //小图标默认八种
      skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅 layer-ext-seaning
      // skin: 'layer-ext-seaning' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅 
    });
});

$('.tips').click(function(){
    //提示层
    layer.msg('玩命提示中');
});

$('.catch').click(function(){
    //捕获页
    layer.open({
      type: 1,
      shade: true, //遮罩层黑色
      title: false, //显示标题
      content: $('.layer_notice'), //捕获的元素
      cancel: function(index){     //取消时触发
      layer.close(index);
      layer.msg('大哥我错了，再也不敢了', {time: 2000, icon:6});
      lay
      }
    });
});

$('.page').click(function(){
    //页面层
    layer.open({
      type: 1,
      skin: 'layui-layer-rim', //加上边框
      area: ['420px', '240px'], //宽高
      content: $('.layer_notice')  //直接添加对象即可获得值
    });
});

$('.self').click(function(){
    //自定页
    layer.open({
      type: 1,
      skin: 'layui-layer-demo', //样式类名
      area: ['420px', '240px'], //宽高
      closeBtn: 1, //0关闭按钮  1显示按钮
      shift: 0,
      shadeClose: true, //开启遮罩关闭
      content: $('.layer_notice')
    });
});

$('.tp').click(function(){
    //tips层
    layer.tips('只想提示地精准些', '.tp',{  //第二个参数为对象
        tips:2                              //方向 智能方向选择 默认右侧
    });
});

$('.iframe').click(function(){
    //iframe窗
    layer.open({
      type: 2,
      title: false,
      closeBtn: 0, //不显示关闭按钮
      shade: [0],
      area: ['340px', '215px'],
      offset: ['100px', '200px'], //右下角弹出 rb   坐标
      time: 6000, //2秒后自动关闭
      shift: 2,
      content: 'http://device.test.com/' , //iframe的url，no代表不显示滚动条
      end: function(){ 
        layer.open({
          type: 2,
          title: '很多时候，我们想最大化看，比如像这个页面。',  //最后页面显示的title
          shadeClose: true,
          shade: false,
          maxmin: true, //开启最大化最小化按钮
          area: ['200px', '200px'],
          content: 'http://www.baidu.com/'      //最后跳转的页面
        });
      }
    });
});

$('.load').click(function(){
    //loading层
    var index = layer.load(5, {
      shade: [0.1,'#fff'] //0.1透明度 白色背景  底层显示透明度 
    });
});