##### layer简介

layer是一款口碑极佳的web弹层组件，她具备全方位的解决方案，致力于服务各个水平段的开发人员，您的页面会轻松地拥有丰富而友好的操作体验。

在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer（已被1739623人次关注）。layer兼容了包括IE6在内的所有主流浏览器。 她数量可观的接口，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，广受欢迎。当然，这种“王婆卖瓜”的陈述听起来总是有点难受，因此你需要进一步了解她是否真的如你所愿。

layer遵循LGPL协议，将永久性提供无偿服务。历经三年，截至到2015年5月23日，已运用在10万余家web平台，其中包括中国联通、蚂蚁短租、慕课网、phpyun等等知名网站，如果您有大型项目也在使用layer，您可以联系作者，以便在此展现案例，也为您的品牌推广尽一些绵薄之力。

layer官网：http://layer.layui.com/
layer官网文档：http://layer.layui.com/api.html

##### 简单示例

初体验 第三方扩展皮肤 询问层 提示层 墨绿深蓝风 捕获页 页面层 自定页 tips层 iframe层 iframe窗 加载层 loading层 小tips prompt层 tab层 相册层

    特别说明：事件需自己绑定，以下只展现调用代码。
    //初体验
    parent.layer.alert('内容')
    //第三方扩展皮肤
    parent.layer.alert('内容', {
        icon: 1,
        skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
    })
    //询问框
    parent.layer.confirm('您是如何看待前端开发？', {
        btn: ['重要','奇葩'], //按钮
        shade: false //不显示遮罩
    }, function(){
        parent.layer.msg('的确很重要', {icon: 1});
    }, function(){
        parent.layer.msg('奇葩么么哒', {shift: 6});
    });
    //提示层
    parent.layer.msg('玩命提示中');

    //墨绿深蓝风
    parent.layer.alert('墨绿风格，点击确认看深蓝', {
        skin: 'layui-layer-molv' //样式类名
    }, function(){
        parent.layer.alert('偶吧深蓝style', {
            skin: 'layui-layer-lan',
            shift: 4 //动画类型
        });
    });

    //捕获页
    parent.layer.open({
        type: 1,
        shade: false,
        title: false, //不显示标题
        content: $('.layer_notice'), //捕获的元素
        cancel: function(index){
            parent.layer.close(index);
            this.content.show();
            parent.layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构',{time: 5000});
        }
    });

    //页面层
    parent.layer.open({
        type: 1,
        skin: 'layui-layer-rim', //加上边框
        area: ['420px', '240px'], //宽高
        content: 'html内容'
    });

    //自定页
    parent.layer.open({
        type: 1,
        skin: 'layui-layer-demo', //样式类名
        closeBtn: false, //不显示关闭按钮
        shift: 2,
        shadeClose: true, //开启遮罩关闭
        content: '内容'
    });

    //tips层
    layer.tips('Hi，我是tips', '吸附元素选择器，如#id');

    //iframe层
    parent.layer.open({
        type: 2,
        title: 'layer mobile页',
        shadeClose: true,
        shade: 0.8,
        area: ['380px', '90%'],
        content: 'http://layer.layui.com/mobile/' //iframe的url
    });

    //iframe窗
    parent.layer.open({
        type: 2,
        title: false,
        closeBtn: false,
        shade: [0],
        area: ['340px', '215px'],
        offset: 'rb', //右下角弹出
        time: 2000, //2秒后自动关闭
        shift: 2,
        content: ['http://www.ruoyi.vip', 'no'], //iframe的url，no代表不显示滚动条
        end: function(){ //此处用于演示
            parent.layer.open({
                type: 2,
                title: '很多时候，我们想最大化看，比如像这个页面。',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['1150px', '650px'],
                content: 'http://www.ruoyi.vip'
            });
        }
    });

    //加载层
    var index = parent.layer.load(0, {shade: false}); //0代表加载的风格，支持0-2

    //loading层
    var index = parent.layer.load(1, {
        shade: [0.1,'#fff'] //0.1透明度的白色背景
    });

    //小tips
    layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
        tips: [1, '#3595CC'],
        time: 4000
    });

    //prompt层
    parent.layer.prompt({
        title: '输入任何口令，并确认',
        formType: 1 //prompt风格，支持0-2
    }, function(pass){
        layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text){
            layer.msg('演示完毕！您的口令：'+ pass +' 您最后写下了：'+ text);
        });
    });

    //tab层
    parent.layer.tab({
        area: ['600px', '300px'],
        tab: [{
            title: 'TAB1',
            content: '内容1'
        }, {
            title: 'TAB2',
            content: '内容2'
        }, {
            title: 'TAB3',
            content: '内容3'
        }]
    });

    //相册层
    $.getJSON('js/demo/photos.json', function(json){
        layer.photos({
            photos: json //格式见API文档手册页
        });
    });

更多示例请访问：http://layer.layui.com/