layer mobile 是一款开源免费的移动端 Web 弹层 UI 界面组件。采用原生 JavaScript 编写，不依赖任何第三方库。该组件是 WebApp 开发过程中弹出交互的不二选择。GitHub

为了精确体验，您可通过 Chrome 设备模式浏览。或通过手机扫二维码进入

## 小试牛刀

信息框 提示 询问框 底部对话框 底部提示 自定义标题风格 页面层 loading 层 loading 带文字

      /** 以下是小试牛刀的调用代码（此处不展示事件绑定）*/

      //信息框
      layer.open({
        content: '移动版和 PC 版不能同时存在同一页面'
        ,btn: '我知道了'
      });

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

      //询问框
      layer.open({
        content: '您确定要刷新一下本页面吗？'
        ,btn: ['刷新', '不要']
        ,yes: function(index){
          location.reload();
          layer.close(index);
        }
      });

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

      //底部提示
      layer.open({
        content: '一个没有任何按钮的底部提示'
        ,skin: 'footer'
      });

      //自定义标题风格
      layer.open({
        title: [
          '我是标题',
          'background-color: #FF4351; color:#fff;'
        ]
        ,content: '标题风格任你定义。'
      });

      //页面层
      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层
      layer.open({type: 2});

      //loading带文字
      layer.open({
        type: 2
        ,content: '加载中'
      });

## 功能说明

一个在底部弹出的完整对话框：

    layer.open({
      title: [
        '我是标题',
        'background-color:#8DCE16; color:#fff;'
      ]
      ,anim: 'up'
      ,content: '展现的是全部结构'
      ,btn: ['确认', '取消']
    });
    运行

设置3秒自动关闭：

    layer.open({
      content: '通过style设置你想要的样式'
      ,style: 'background-color:#09C1FF; color:#fff; border:none;' //自定风格
      ,time: 3
    });
    运行

设置不允许点遮罩关闭：

    layer.open({
      content: '不允许点击遮罩关闭',
      btn: '我知道了',
      shadeClose: false,
      yes: function(){
        layer.open({
          content: '好的'
          ,time: 2
          ,skin: 'msg'
        });
      }
    });
    运行

自定义一个全屏的页面层：

    var pageii = layer.open({
      type: 1
      ,content: html
      ,anim: 'up'
      ,style: 'position:fixed; left:0; top:0; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;'
    });
    运行

<div style="padding:20px;"> <p style="margin-bottom: 20px;">仿佛是一个全新的页面</p> <a href="javascript:;" class="button" onclick="layer.closeAll(); layer.open({content:'世界恢复原样 →_→', time:2}); ">我要关闭！！</a> </div>

## 结语

请恕我们无法为您一一演示，我们更希望你认真去阅读文档，那里列举了 layer 所有的使用方法，它们会帮助你完成形形色色的弹出交互。

文档 layer PC 版

layui.com出品