layerui下载:http://www.layui.com

更多参数请阅读开发文档：http://www.layui.com/doc/modules/layer.html

Layui 是一款采用自身模块规范编写的情怀型前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发

1.引入js 和css

 <script type="text/javascript" src="jquery-1.9.0.min.js"></script>

 <script type="text/javascript" src="layui.all.js"></script>

 <link rel="stylesheet" href="css/layui.css">

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>layer</title>

    <script type="text/javascript" src="jquery-1.9.0.min.js"></script>

    <script type="text/javascript" src="layui.all.js"></script>

    <link rel="stylesheet" href="css/layui.css">

</head>

<body>

<div id="one">

    <input type="button" value="确定">

    <input id="b3" type="button" value="确定">

</div>

<script>

    //    layer.msg('hello');

    //    layer.msg('不开心。。', {icon: 5});

//    layer.confirm('纳尼？', {//自定义弹出框

//        btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮

//        , btn3: function (index, layero) {

//            //按钮【按钮三】的回调

//            alert(333)

//        }

//    }, function (index, layero) {

//        //按钮【按钮一】的回调

//        alert(111)

//    }, function (index) {

//        //按钮【按钮二】的回调

//        alert(222)

//    });

    $('input').click(function () {

        layer.open({

            id:0,//用于控制弹层唯一标识

            area: ['600px', '400px'],

//            offset: 'lt',//设置弹出框的位置

            type:2,//layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

            closeBtn:1,//设置关闭按钮默认1 可设置参数0 1 2

            shade:0.3,//遮罩 ：0.3

            shadeClose:false,//是否点击遮罩关闭 ,默认false

//            time:5000,//自动关闭所需毫秒 默认：0 默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，

            anim:0,//弹出动画目前anim可支持的动画类型有0-6 如果不想显示动画，设置 anim: -1 即可。另外需要注意的是，3.0之前的版本用的是 shift 参数

            isOutAnim:true,//关闭动画 （layer 3.0.3新增） 默认情况下，关闭层时会有一个过度动画。如果你不想开启，设置 isOutAnim: false 即可

            maxmin:false,//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可

            fixed:true,//即鼠标滚动时，层是否固定在可视区域。如果不想，设置fixed: false即可

            resize:false,//默认情况下，你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能，设置 false即可。该参数对loading、tips层无效

            scrollbar:true,//是否允许浏览器出现滚动条 默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽

            maxWidth:500,//默认：360 请注意：只有当area: 'auto'时，maxWidth的设定才有效。

            maxHeight:800,// 默认：无 请注意：只有当高度自适应时，maxHeight的设定才有效。

            zIndex:19891014,//默认：19891014 一般用于解决和其它组件的层叠冲突。

            move:'.layui-layer-title',// 触发拖动的元素 默认：'.layui-layer-title'  默认是触发标题区域拖拽。如果你想单独定义，指向元素的选择器或者DOM即可。如move: '.mine-move'。你还配置设定move: false来禁止拖拽

//            yes:function (index, layero) {//确定按钮回调方法 该回调携带两个参数，分别为当前层索引、当前层DOM对象。如：

//               alert("确定后要做的事情");

//                layer.close(index); //如果设定了yes回调，需进行手工关闭

//            },

            cancel:function (index, layero) {//右上角关闭按钮触发的回调 该回调携带两个参数，分别为：当前层索引参数（index）、当前层的DOM对象（layero），默认会自动触发关闭。如果不想关闭，return false即可

                if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭 设置 type:2  closeBtn:2,

                    layer.close(index)

                }

                return false;

            },

            resizing:function () {

                alert(111111)

            },

            title: "查看文章",

            content: 'user.html',//这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content:

//             success:function () {//层弹出后的成功回调方法

//              alert("窗口弹出成功了！");

//            }

        });

    });

    //方法大全

    //layer.open(options) - 原始核心方法

    //-----------------------------------------------------------------------------------------------------

    //1.layer.alert(content, options, yes) - 普通信息框 它的弹出似乎显得有些高调，一般用于对用户造成比较强烈的关注，类似系统alert，

    // 但却比alert更灵便。它的参数是自动向左补齐的。通过第二个参数，可以设定各种你所需要的基础参数，但如果你不需要的话，直接写回调即可

//    layer.alert('有了回调', function(index){

//        //do something

//        alert(1111);

//        layer.close(index);

//    });

    //-----------------------------------------------------------------------------------------------------

    //2.layer.confirm(content, options, yes, cancel) - 询问框  类似系统confirm，但却远胜confirm，

    // 另外它不是和系统的confirm一样阻塞你需要把交互的语句放在回调体中。同样的，它的参数也是自动补齐的。

//    layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){

//        //do something

//

//        layer.close(index);

//    });

    //-----------------------------------------------------------------------------------------------------

    //3. layer.msg(content, options, end) - 提示框 我们在源码中用了相对较大的篇幅来定制了这个msg，

    // 目的是想将其打造成露脸率最高的提示框。而事实上我的确也在大量地使用它。

    // 因为它简单，而且足够得自觉，它不仅占据很少的面积，而且默认还会3秒后自动消失所有这一切都决定了我对msg的爱。

    // 因此我赋予了它许多可能在外形方面，它坚持简陋的变化，在作用方面，它坚持零用户操作。而且它的参数也是自动补齐的。

    //eg1

//    layer.msg('只想弱弱提示');

    //eg2

//    layer.msg('有表情地提示', {icon: 6});

    //eg3

//    layer.msg('关闭后想做些什么', function(){

//        //do something

//    });

    //eg

//    layer.msg('同上', {

//        icon: 1,

//        time: 2000 //2秒关闭（如果不配置，默认是3秒）

//    }, function(){

//        //do something

//    });

    //-----------------------------------------------------------------------------------------------------

    //4.layer.load(icon, options) - 加载层 type:3的深度定制。load并不需要你传太多的参数，但如果你不喜欢默认的加载风格，

    // 你还有选择空间。icon支持传入0-2如果是0，无需传。另外特别注意一点：load默认是不会自动关闭的，因为你一般会在ajax回调体中关闭它。

    //eg1

//    var index = layer.load();

    //eg2

//    var index = layer.load(1); //换了种风格

    //eg3

//    var index = layer.load(2, {time: 10*1000}); //又换了种风格，并且设定最长等待10秒

    //关闭

//    layer.close(index);

    //-----------------------------------------------------------------------------------------------------

    //layer.tips(content, follow, options) - tips层 type:4的深度定制。也是我本人比较喜欢的一个层类型，

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

    //eg1

//    layer.tips('只想提示地精准些', '#b3');

    //eg 2

//    $('#b3').on('click', function(){

//        var that = this;

//        layer.tips('只想提示地精准些', that); //在元素的事件回调体中，follow直接赋予this即可

//    });

    //eg 3

//    layer.tips('在上面', '#b3', {

//        tips: 1

//    });

    //-----------------------------------------------------------------------------------------------------

    //layer.prompt(options, yes) - 输入层 prompt的参数也是向前补齐的。options不仅可支持传入基础参数，还可以传入prompt专用的属性。当然，

    // 也可以不传。yes携带value 表单值index 索引elem 表单元素

//    layer.prompt(function(value, index, elem){

//        alert(value); //得到value

//        layer.close(index);

//    });

    //-----------------------------------------------------------------------------------------------------

    //layer.tab(options) - tab层  tab层只单独定制了一个成员，即tab: []，例子

//    layer.tab({

//        area: ['600px', '300px'],

//        tab: [{

//            title: 'TAB1',

//            content: '内容1'

//        }, {

//            title: 'TAB2',

//            content: '内容2'

//        }, {

//            title: 'TAB3',

//            content: '内容3'

//        }]

//    });

    //-----------------------------------------------------------------------------------------------------

    //layer.setTop(layero) -置顶当前窗口 非常强大的一个方法，虽然一般很少用。但是当你的页面有很多很多layer窗口，

    // 你需要像Window窗体那样，点击某个窗口，该窗体就置顶在上面，那么setTop可以来轻松实现。它采用巧妙的逻辑，以使这种置顶的性能达到最优

//    layer.open({

//        type: 2,

//        shade: false,

//        area: '500px',

//        maxmin: true,

//        content: 'http://www.layui.com',

//        zIndex: layer.zIndex, //重点1

//        success: function(layero){

//            layer.setTop(layero); //重点2

//        }

//    });

</script>

</body>

</html>

　　

layer弹出框插件参数及方法介绍的更多相关文章

  1. 弹出框插件layer使用

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

  2. 弹出框插件——dialog

    基于jquery和dot.js弹出框插件,兼容IE6+等其他浏览器. 思想:弹出框元素插入body节点中,并在页面垂直居中显示(fixed定位),触发确定和关闭事件绑定. 注意ie6包含两个问题:一. ...

  3. layer弹出框确定前验证:弹出消息框(弹出两个layer)

    作者QQ:1095737364 QQ群:123300273 欢迎加入! layer 弹出框中经常遇到要弹出表单进行修改数据, 因此在弹出框中的表单需要验证数据, 就需要在弹出一个layer, 默认的设 ...

  4. HTML页面使用layer弹出框输入数据

    javascript中layer是一款近年来备受青睐的web弹层组件,layer.open对弹出框进行输入信息,并处理返回结果.详细介绍http://layer.layui.com/ 部署:将laye ...

  5. layer弹出框，zIndex不断增加的问题

    针对layer弹出框每次进行弹出操作时z-index不断加1的问题,手动设置过zIndex值不管用,每次关闭时清空layer对象也不管用. 解决办法: 修改layer.js,,将红框代码改为绿框代码, ...

  6. Vue父组件如何调用子组件（弹出框）中的方法的问题

    如果子组件是一个弹出框,只有在触发某个点击事件时弹出框才能出现(也就是说在父组件中的子组件使用上用了v-if),那在父组件上如果不点击弹出框是不能获取到$ref的. 原因就是:引用指向的是子组件创建的 ...

  7. JS弹出框插件zDialog再次封装

    zDialog插件网址:http://www.jq22.com/jquery-info2426 再次封装zDialog的代码: (function ($) { $.extend({ iDialog: ...

  8. jQuery+css3弹出框插件

    先来看DEMO:https://codepen.io/jonechen/pen/regjGG 插件的开发很简单,运用了CSS3的动画效果,并且弹出框的内容可以自定义.插件的默认配置参数有三个: var ...

  9. jquery的Layer弹出框操作

    在layer中,我们要先获取窗口的索引,然后再进行操作. var index = parent.layer.getFrameIndex(window.name); //获取窗口索引 $("# ...

随机推荐

  1. php中 curl模拟post发送json并接收json（转）

    本地模拟请求服务器数据,请求数据格式为json,服务器返回数据也是json. 由于需求特殊性, 如同步客户端的批量数据至云端, 提交至服务器的数据可能是多维数组数据了.  这时需要将此数据以一定的数据 ...

  2. Could not find class 'org.ksoap2.serialization.SoapObject

    Could not find class 'org.ksoap2.serialization.SoapObject工程编译没问题,一在模拟器运行就报错! 这是由于ADT版本过高引发的问题,解决办法: ...

  3. （转）Makefile经典教程(掌握这些足够)

    该篇文章为转载,是对原作者系列文章的总汇加上标注. 支持原创,请移步陈浩大神博客: http://blog.csdn.net/haoel/article/details/2886 makefile很重 ...

  4. HTTP-头域

    头域 每个头域由一个域名,冒号(:)和域值三部分组成.域名是大小写无关的,域值前可以添加任何数量的空格符,头域可以被扩展为多行,在每行开始处,使用至少一个空格或制表符. HTTP请求消息 HTTP状态 ...

  5. java中关于length的真确理解~~~~有补充的请跟帖~~~

    java中的length到底是个什么东西呢?有人说它是一个类,一个方法,如果是方法,它没有括号, 我只知道它可以得出数组的长度,但是今天遇到一段代码,怎么都解释不通,那就是绝对不会把循环的次数与数组的 ...

  6. Dynamics CRM early binding and late binding

    The key advantage of late bound entity classes is that customer entities and attributes not avaliabl ...

  7. 卷积神经网络之ResNet网络模型学习

    Deep Residual Learning for Image Recognition 微软亚洲研究院的何凯明等人 论文地址 https://arxiv.org/pdf/1512.03385v1.p ...

  8. 【树莓派智能门锁】使用脚本控制GPIO来开锁【4】

    假定你已经通过此文章或者其他方式完成了树莓派的基本配置 [树莓派]RASPBIAN镜像初始化配置 我们通过VNC View连接到树莓派查看一下~ 1.更新一下基本的设置:更新一下源,把python-d ...

  9. flask系列三之Jinja2模板

    1.如何渲染模板 模板在‘templates’文件夹下(htnl页面) 从flask中导入render_template函数---渲染html模板 在视图函数中,使用render_template 函 ...

  10. HTTP常用标准请求头字段

    常用标准请求头字段 Accept 设置接受的内容类型 Accept: text/plain Accept-Charset 设置接受的字符编码 Accept-Charset: utf-8 Accept- ...