弹出框（layer.js）

layer mobile是为移动设备（手机、平板等webkit内核浏览器/webview）量身定做的弹层UI。由于是采用原生 JavaScript编写，所有并不依赖任何第三方库。layer mobile完全独立于PC版的layer，您需要按照场景选择使用。layer mobile正致力于成为您WebApp开发过程中弹出交互的不二选择。

官网：http://layer.layui.com/
layer mobile：http://layer.layui.com/mobile/

使用方法

下载 layer移动版到assets/vendor文件夹下，并将自定义的CSS文件custom.css拷贝到 layer.mobile-v2.0/layer_mobile/need文件夹中。
=

使用前先引入样式文件与脚本文件

    <link rel="stylesheet" type="text/css" href="/assets/vendor/layer-mobile-v2.0/layer-mobile/need/layer.css">
    <link rel="stylesheet" type="text/css" href="/assets/vendor/layer-mobile-v2.0/layer-mobile/need/custom.css">
    <!-- 新版为下面这个路径 -->
    <link rel="stylesheet" href="/assets/vendor/layer/build/mobile/need/layer.css">
    <link rel="stylesheet" href="/assets/styles/common.css">

    <script src="/assets/vendor/layer-mobile-v2.0/layer-mobile/layer.js"></script>
    <!-- 新版为下面这个路径 -->
    <script src="/assets/vendor/layer/build/mobile/layer.js"></script>

弹框示例

• 信息框

  

    //信息框
    layer.open({
        className: 'dialog-need-view',
        content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
        btn: '我知道了'
    });
  

• 提示框

  

    //提示框
    layer.open({
        content: 'hello layer',
        skin: 'msg',
        time: 2 //2秒后自动关闭
    });
  

• 询问框

  

    //询问框
    layer.open({
        className: 'dialog-need-confirm',
        content: '确认删除该商品？',
        btn: ['确认', '取消'],
        yes: function() {
  
        },
        no: function(){
  
        }
    });
  

• 底部弹出框

  

    //底部弹出框
    layer.open({
        content: '这是一个底部弹出的询问提示',
        btn: ['删除', '取消'],
        skin: 'footer',
        yes: function(index) {
            //删除按钮执行该函数
            layer.open({
                content: '执行删除操作'
            })
        },
        no: function() {
            //取消按钮执行该操作
        }
    });
  

• 底部提示（内容自定义）

  

    //底部提示框（内容自定义）
    layer.open({
        content: '一个没有任何按钮的底部提示',
        skin: 'footer'
    });
  

• 自定义标题（input）

  

    //自定义标题及提示内容（input）
    layer.open({
        className: 'dialog-need-input dialog-btn-s1',
        btn: ['删除', '取消'],
        title: [
            '<div>设置微信号</div>',
            'text-align:left;border-bottom:1px solid #e4e4e4;font-size:.32rem;font-weight:500;background-color:#f3f3f3;padding:0 .3rem;height:1rem;line-height:1rem;'
        ],
        content: '<form id="formWechat">' +'<p class="top-tips mb-15 font-28">该微信号为合作伙伴之间看到的联系方式</p>' + '<input class="form-input font-28" id="wechat" type="text" name="wechat" value="">' + '<p class="bottom-tips mt-15 font-28">微信号必须为6~20位字符，可由字母、数字、"_"、和"-"组成。</p>' + '</form>',
        yes: function() {
  
        },
        no: function() {
  
        }
    });
  

• 自定义标题（textarea）

  

    //自定义标题及提示内容（input）
    layer.open({
        className: 'dialog-need-textarea dialog-btn-s1',
        btn: ['复制链接', '返回'],
        title: [
            '<div>复制邀请链接</div>',
            'text-align:left;border-bottom:1px solid #e4e4e4;font-size:.32rem;font-weight:500;background-color:#f3f3f3;padding:0 .3rem;height:1rem;line-height:1rem;'
        ],
        content: '<form id="">' + '<p class="top-tips mb-15 font-28">复制以下链接，通过QQ、微博、邮箱等，邀请好友加入百e云创</p>' + '<textarea class="font-28" id="" name="" cols="30" rows="10"></textarea>' + '</form>',
        yes: function() {
  
        },
        no: function() {
  
        }
    });
  

• 页面层（自定义内容）

  

    //页面层（自定义内容）
    layer.open({
        type: 1,
        content: '可传入任何内容，支持html。一般用于手机页面中',
        anim: 'up', //弹出框的动画类型
        style: 'position:fixed; bottom:0; left:0; width: 100%; height: 200px; padding:10px 0; border:none;'
    });
  

• 圆圈loading层

  

    //圆圈loading层
    layer.open({
        className: 'dialog-loading-s1',
        content: '<div class="loading-con"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>',
        skin: 'msg',
        // time: 2
    });
  

• 带文字的圆圈loading层

    //带文字的圆圈loading层
    layer.open({
        className: 'dialog-loading-s1 dialog-need-text',
        content: '<div class="loading-con"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>' + '<div class="loading-text">加载中</div>',
        skin: 'msg',
        // time: 2
    });

• loading层

  

    //loading层
    layer.open({
        type: 2 //loading样式类型
    });
  

• 带文字的loading层

  

    layer.open({
        type: 2,
        content: '加载中'
    });