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: });

Layer弹窗组件的更多相关文章

  1. layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案

    layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案 >>>>>>>>>>>>> ...

  2. Vue列表组件与弹窗组件示例

    列表组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <me ...

  3. Jquery弹窗组件

    下面是写的简单的Jquery弹窗组件 暂不支持animate,只能满足一般的弹窗显示隐藏需求,更多功能后续会完善!网上及jquery组件很多这样的弹窗,但是用别人的感觉心里过不去,所以就随便写写,当做 ...

  4. 百度智能小程序弹窗组件wcPop|智能小程序自定义model弹窗模板

    百度智能小程序自定义弹窗组件wcPop|百度小程序model对话框|智能小程序弹窗界面模板 最近百度也推出了自己的智能小程序,如是就赶紧去试了下,官方提供的api还不是狠完整.而且官方提供的弹窗组件也 ...

  5. 基于JQ的自定义弹窗组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 微信小程序弹窗组件

    概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...

  7. 从零开始徒手撸一个vue的toast弹窗组件

    相信普通的vue组件大家都会写,定义 -> 引入 -> 注册 -> 使用,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): ...

  8. Vue - 简单实现一个命令式弹窗组件

    前言 在日常工作中弹窗组件是很常用的组件,但用得多还是别人的,空闲时间就自己来简单实现一个弹窗组件 涉及知识点:extend.$mount.$el 使用方式: this.$Confirm({ titl ...

  9. uni-app自定义Modal弹窗组件|仿ios、微信弹窗效果

    介绍 uniapp自定义弹窗组件uniPop,基于uni-app开发的自定义模态弹窗|msg信息框|alert对话框|confirm确认框|toast弱提示框 支持多种动画效果.多弹窗类型ios/an ...

随机推荐

  1. HDU 4162 Shape Number (最小表示法)

    题意:给你一串n个数,求出循环来看一阶差的最小字典序:数字串看成一个顺时针的环,从某一点开始顺时针循环整个环,保证字典序最小就是答案 例如给你 2 1 3 就会得到(1-2+8 注意题意负数需要加8) ...

  2. loadrunner生成随机数

    loadrunner生成随机数一: 对网站注册进行压力测试时,需要对注册的用户名进行参数化,因为可以会用到大量的测试数据,所以选择通过生成随机数来进行参数化.最开始用loadrunner自带的参数随机 ...

  3. C#插件构架实战 + Visual C#插件构架实战补遗(转)

    C#插件构架实战 C# 插件构架实战 Jack H Hansen [ 2004-07-27 ] Keywords C# 插件 反射(System.Reflection) 属性(System.Attri ...

  4. 2016.8.16 HTML5重要标签及其属性学习

    1.运用BootStrap的基本布局: 2.基本布局第二步: ] 3.BootStrap提供了一个class=”well“”类,可以给你种深度的感觉: 4.不是每一个类都是为了CSS,有些类创建出来只 ...

  5. no-jquery 04 Events

    Events Sending Native (DOM) Events anchorElement.click(); Sending Custom Events var event = document ...

  6. Transform组件C#游戏开发快速入门

    Transform组件C#游戏开发快速入门大学霸 组件(Component)可以看作是一类属性的总称.而属性是指游戏对象上一切可设置.调节的选项,如图2-8所示.本文选自C#游戏开发快速入门大学霸   ...

  7. js兼容方法:通过样式名获取元素,byClass

    function byClass(oParent,className){ if(document.getElementsByClassName){ //if it is Firefox return ...

  8. 【转】】Android ADB命令大全

    ADB很强大,记住一些ADB命令有助于提高工作效率. 获取序列号: adb get-serialno 查看连接计算机的设备: adb devices 重启机器: adb reboot 重启到bootl ...

  9. 请将 php.ini 中的 short_open_tag 设置为 On,否则无法继续安装。

    安装的wamp套件,访问http://localhost/Discuz/install/index.PHP进行安装操作,提示 对不起,请将 php.ini 中的 short_open_tag 设置为 ...

  10. 多表头固定demo--html Table

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...