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-fpm.conf 配置文件详解

    php-fpm.conf  配置文件详解 [global] pid = run/php-fpm.pid error_log = log/php-fpm.log log_level = notice # ...

  2. CAN总线过载帧

    过载帧 过载帧与主动错误帧具有相同的格式.但是,过载帧只能在帧间间隔产生,因此可通过这种方式区分过载帧和错误帧(错误帧是在帧传输时发出的).过载帧由两个字段组成,即过载标志和随后的过载定界符.过载标志 ...

  3. Stratix IV内嵌DPA电路的基本结构

    StratixIV内嵌DPA电路的基本结构 Altera DPA电路特点如下. 可以放松高速接口对时钟到数据通道和数据通道之间对Skew的严格要求. 最高支持1.6Gbit/s应用. 专用硬件DPA ...

  4. linux下用户和组相关的文件及相关管理命令

    1.用户信息文件  /etc/passwd 示例root:x:0:0:root:/root:/bin/bashbin:x:1:1:bin:/bin:/sbin/nologindaemon:x:2:2: ...

  5. java多线程实现每隔500毫秒输出一个数字

    总结:主要是利用多线程来进行控制它输出的速度,而且这里要处理异常,这个异常我是这样处理的 1.首先写完一个for循环后,写这个:Thread.currnetThread().sleep(500); 然 ...

  6. 几种经典的hash算法

    计算理论中,没有Hash函数的说法,只有单向函数的说法.所谓的单向函数,是一个复杂的定义,大家可以去看计算理论或者密码学方面的数据.用“人 类”的语言描述单向函数就是:如果某个函数在给定输入的时候,很 ...

  7. ThreadStart中带参数

    Thread Hand1 = new Thread(() =>        {            MethodName(参数1, 参数2);        });        Hand1 ...

  8. C#中Monitor对象与Lock关键字的区别分析

    这篇文章主要介绍了C#中Monitor对象与Lock关键字的区别,需要的朋友可以参考下 Monitor对象 1.Monitor.Enter(object)方法是获取 锁,Monitor.Exit(ob ...

  9. CSS滤镜模糊效果

    .blur { -webkit-filter: blur(6px); -moz-filter: blur(6px); -ms-filter: blur(6px); filter: blur(6px); ...

  10. 利用HADOOP中的jar写一个RPC

    RPC调用需要服务端和客户端使用相同的协议: 协议: package cn.itcast.bigdata.hadooprpc.protocol; public interface IUserLogin ...