Layer弹窗组件

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

Layer的开发手册和下载地址

http://layer.layui.com/api.html

http://layer.layui.com/

Open

基本上是露脸率最高的方法，不管是使用哪种方式创建层，都是走layer.open()，创建任何类型的弹层都会返回一个当前层索引，该网站中的options即是基础参数http://layer.layui.com/api.html#type 例子：

layer.open
({
        type:0,
        content:"成功，喵呜~",
        icon:6,
        closeBtn: 2,
        btn1:function(index){layer.closeAll()},
       end:function(){layer.closeAll()}
});  

CloseAll关闭弹窗

它会销毁掉当前页所有的layer层。当然，如果你也可以指定关闭某个类型的层

layer.closeAll(); //疯狂模式，关闭所有层

layer.closeAll('dialog'); //关闭信息框

layer.closeAll('page'); //关闭所有页面层

layer.closeAll('iframe'); //关闭所有的iframe层

layer.closeAll('loading'); //关闭加载层

layer.closeAll('tips'); //关闭所有的tips层  

var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

//parent.layer.closeAll(index);

parent.layer.closeAll();

Tips小贴士

它拥有和 msg 一样的低调和自觉，而且会智能定位，即灵活地判断它应该出现在哪边。默认是在元素右边弹出

function tips()
{

        layer.tips("想要修改东西，先点击我解除", $("#edit"),
        {
            tips: [1, '#3595CC'],
            time: 4000
        });

        $("#add,#edit,#save,#cut,#remove").mouseover(function ()
        {
            var title = $(this).attr("title");
            layer.tips(title, $(this), {
                tips: [1, '#3595CC'],
            });
        }).mouseleave(function ()
        {
            layer.closeAll('tips');
        })
}

Load加载图

load 默认是不会自动关闭的，因为你一般会在 ajax 回调体中关闭它。

layer.load(0,{
  shade:[0.5,'#fff'],
  time:10 * 1000
})    

Confirm询问框

Confirm 方法是对 Open函数的变形

//询问框
layer.confirm('确认退出吗？', {
    btn: ['确定', '取消'] //按钮
}, function ()
{
    window.location.href = "/index.aspx";
    layer.closeAll();
    //提示层
    layer.msg('正在退出...');
}, function ()
{
    return;
});

Msg

露脸率最高的提示框

layer.msg('玩命提示中');

layer.msg(
'这里放置文本内容',
{
    //这里放置基础参数
    icon: 1, //1为正确图标，2为错误图标
    time: 2000, //2秒关闭（如果不配置，默认是3秒）
    closeBtn:2
},
 function(){
    //这里写end事件
});  

Iframe

最强大的弹出框

layer.open({
    type: 2,
    title: "正在与门店进行亲切会谈",
    shadeClose: true,
    shade: false,
    maxmin: true, //开启最大化最小化按钮
    area: ['400px', '600px'],
    content: "chat.aspx?roomid=" + id
});

IFrame子父窗口交接

var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
parent.layer.closeAll(index);
parent.layer.closeAll();

 居中问题

 $('img').load(function()
{
    //由于模板中存在图片未加载，当layer弹出的时候。宽度计算错误导致不居中，所以我手动居中了
    var widthForWindow = $(window).width();
    var winthForLayer = $(".mylayer").width();
    var myWidth = (widthForWindow - winthForLayer) / 2;
    layer.style(index,{left:myWidth,top:"15%"});
}) 

 模板通常会配合open使用

$("#jifenpeizhi").click(function ()
          {
              layer.closeAll();
              var index =  layer.open
              ({
                  type: 1,
                  title: "积分配置",
                  content: $("#template").html(),
                  btn: 1,
                  shade:0,
                  skin:"jifenpeizhi"
              });

              $("#start,#end").bind("click",function()
              {
                  var id = "#" + $(this).attr("id");
                  laydate({
                      elem: id,
                      format: 'YYYY/MM', // 分隔符可以任意定义，该例子表示只显示年月
                      festival: true, //显示节日
                      choose: function (datas)
                      {
                          //选择日期完毕的回调
                          alert('得到：' + datas);
                      }
                  })
              })

             $(".jifenpeizhi").css({"min-width":"700px" });
              //由于模板中存在图片未加载，当layer弹出的时候。宽度计算错误导致不居中，所以我手动居中了
             var widthForWindow = $(window).width();
             var winthForLayer = $(".jifenpeizhi").width();
             var myWidth = (widthForWindow - winthForLayer) / 2;
             layer.style(index, { left: myWidth, top: "15%" });

          })

 监听ESC关闭所有的layer

  document.onkeydown = function (event)
          {
              var e = event || window.event || arguments.callee.caller.arguments[0];
              var keyCode = e.keyCode || e.which;
              if (keyCode == "27")
              {
                  layer.closeAll();
              }
          }

 手机版

layer.open({ title: '信息', content: '金额必须为正整数',btn:["好的"],yes:function(){layer.closeAll();}  });

load

layer.open({type: });