Layer For Mobile

为了精确体验，您可通过Chrome设备模式浏览。或通过

小试牛刀

提示框 信息框 询问框 页面层 加载条

      /** 以下是小试牛刀的调用代码（此处不展示事件绑定）*/
      //提示框
      layer.open({
      content: '您好',
      time: 2 //2秒后自动关闭
      });
      //信息框
      layer.open({
      title: '信息',
      content: '移动版和PC版不能同时使用在同一页面。'
      });
      //询问框
      layer.open({
      title: '提示',
      content: '您确定要刷新一下本页面吗？',
      btn: ['嗯', '不要'],
      yes: function(index){
      location.reload();
      layer.close(index);
      }
      });
      //页面层
      layer.open({
      type: 1,
      content: '可传入任何内容，支持html。一般用于手机页面中',
      anim: 0,
      style: 'position:fixed; bottom:0; left:0; width:100%; height:150px; padding:10px 0; border:none;'
      });
      //加载层
      layer.open({type: 2});
      

注意事项

功能演示

普通信息框，并设置2秒自动关闭：

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

提示框，并自定义标题风格：

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

提示框，并显示1个按钮：

      layer.open({
      content: '通过style设置你想要的样式',
      btn: ['OK']
      });
      
      运行
      
    

询问框，并显示2个按钮，不允许点遮罩关闭：

      layer.open({
      content: '你是想确认呢，还是想取消呢？',
      btn: ['确认', '取消'],
      shadeClose: false,
      yes: function(){
      layer.open({content: '你点了确认', time: 1});
      }, no: function(){
      layer.open({content: '你选择了取消', time: 1});
      }
      });
      
      运行
      
    

页面层，全屏：

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

注意事项