<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

        <title>开始使用layui</title>

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

    </head>

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

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

<!--     * 从官网下载的layui包中解压后内容如下

     * ├─css //css目录

      │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）

      │  │  ├─laydate

      │  │  ├─layer

      │  │  └─layim

      │  └─layui.css //核心样式文件

      ├─font  //字体图标目录

      ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）

      │─lay //模块核心目录

      │  └─modules //各模块组件

      │─layui.js //基础核心库

      └─layui.all.js //包含layui.js和所有模块的合并文件

      * 这里要十分注意的是，我们测试的代码中引入layui的js要引入 layui.all.js，否则某些功能会无效-->

    <body>

        <!-- 你的HTML代码 -->

        <div>

            aa

        </div>

        <button id="start" data-method="setTop" class="layui-btn">显示弹出层</button>

    <script>

         $(function(){

             //打开弹窗

             $("#start").on("click",function(){

                 f5();

             });

        });

        //单个确认按钮（常用）

        function f7(){

            layer.alert("aa");

        }

        //确认、取消按钮（常用）

        function f6(){

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

              //do something

              alert("aa")

              layer.close(index);

            });

        }

        //自动消失提示（常用）

        function f7(){

            layer.msg("aa");

        }

        //单个按钮

        function f5(){

            layer.open({

              content: 'test'

              ,btn: ['按钮一']

            });

        }

//下面仅供参考         

        //多个确认按钮

        function f2(){

            layer.confirm('纳尼？', {

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

                    ,

                btn3: function(index, layero) {

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

                }

            }, function(index, layero) {

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

            }, function(index) {

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

            });

        }

        //多个确认按钮

        function f3(){

            layer.open({

              content: 'test'

              ,btn: ['按钮一', '按钮二', '按钮三']

              ,yes: function(index, layero){

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

                alert(1);

                layer.close(index);

              }

              ,btn2: function(index, layero){

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

                 alert(2);

                //return false 开启该代码可禁止点击该按钮关闭

              }

              ,btn3: function(index, layero){

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

                alert(3);

                //return false 开启该代码可禁止点击该按钮关闭

              }

              ,cancel: function(){

                //右上角关闭回调

                //return false 开启该代码可禁止点击该按钮关闭

              }

            });

        }

        //多个确认按钮

        function f4(){

            layer.open({

              content: 'test'

              ,btn: ['确定', '取消']

              ,yes: function(index, layero){

                //确定的回调

                alert(1);

                layer.close(index);

                return 1;

              }

              ,btn2: function(index, layero){

                //取消的回调

                 alert(2);

                 return 2;

                //return false 开启该代码可禁止点击该按钮关闭

              }

              ,cancel: function(){

                //右上角关闭回调

//                return false //开启该代码可禁止点击该按钮关闭

              }

            });

        }

    </script>

</html>

layui 常用确认框、提示框 demo的更多相关文章

  1. JavaScript 消息框,警告框,确认框,提示框

    1.警告框 警告框经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作. 语法: alert("文本") 2.确认框 确认框用于使用户可以验证或 ...

  2. bootstrap弹出框提示框无法调用

    使用bootstrap的js插件真的很好用啊有木有!! 但是第一次使用这个弹出框跟提示框的时候就被打击了,没有反应啊!! 然而这并不是一个大问题,一句话搞定,看代码: //首先是工具提示: $(fun ...

  3. Unity编辑器-创建单独编辑框,折叠框,提示框

    今天我们就来学习如何创建一个编辑框,上面绘制一个折叠框里面有四种消息框. 代码如下: using UnityEngine; using System.Collections; using UnityE ...

  4. JavaScript 中创建三种消息框：警告框、确认框、提示框。

    网址:http://www.w3school.com.cn/js/js_popup.asp 警告框 警告框经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作. 语 ...

  5. JS组件系列——Bootstrap寒冬暖身篇：弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  6. Bootstrap：弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  7. JS组件Bootstrap实现弹出框和提示框效果代码

    这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...

  8. Bootstrap篇：弹出框和提示框效果以及代码展示

     前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你 ...

  9. 强大的响应式jQuery消息通知框和信息提示框插件

    lobibox是一款功能很强大的jQuery消息通知框和信息提示框插件.这个插件分为两个部分:消息通知框和信息提示框.它能很好的结合Bootstrap使用. 信息提示框 lobibox的信息提示框能够 ...

随机推荐

  1. linux基础—课堂随笔010_系统启动和内核管理

    系统启动和内核管理 Linux: kernel+rootfs kernel: 进程管理.内存管理.网络管理.驱动程序.文件系统.安全功能 rootfs:程序和glibc 库:函数集合, functio ...

  2. 重新编译mysqldump，使mysqldump具有进度输出功能

    重新编译mysql,使mysqldump具有进度输出功能 安装编译过程所必须的依赖包和环境 yum install -y gcc cmake boost boost-build boost-devel ...

  3. 自然语言处理(三) 预训练模型：XLNet 和他的先辈们

    预训练模型 在CV中,预训练模型如ImagNet取得很大的成功,而在NLP中之前一直没有一个可以承担此角色的模型,目前,预训练模型如雨后春笋,是当今NLP领域最热的研究领域之一. 预训练模型属于迁移学 ...

  4. HelloWorld编写过程中注意事项

    一.package关键字 * package表示当前代码所属的包(package),是一种组织结构.其他package通过包名调用这个包下内容* package是必须的,每个文件的package必须存 ...

  5. 单调队列优化&&P1886 滑动窗口题解

    单调队列: 顾名思义,就是队列中元素是单调的(单增或者单减). 在某些问题中能够优化复杂度. 在dp问题中,有一个专题动态规划的单调队列优化,以后会更新(现在还是太菜了不会). 在你看到类似于滑动定长 ...

  6. 《Python基础教程》第六章：抽象（一）

    用def定义函数 __doc__是函数属性.属性名中的双下划线表示它是个特殊属性

  7. 关于JavaScript的事件绑定

    js事件绑定的几种方式 JavaScript中有三种常用的绑定事件方法: 1. 在DOM元素中直接绑定: 2. 在JavaScript代码中绑定: 3. 绑定事件佳妮婷函数. 一.在DOM元素中直接绑 ...

  8. 网页分享到微信、微博、QQ空间、百度贴吧等

    1.首先说明的是,pc端微信分享只能通过二维码来分享. 2.下面是js代码. //分享到新浪微博 function shareToSinaWB(event){ event.preventDefault ...

  9. java 强制类项转换

    origin:http://blog.csdn.net/hikvision_java_gyh/article/details/8957450 编写java程序时,引用变量只能调用它编译时的类项方法.而 ...

  10. MessagePack Java Jackson 序列化和反序列化 POJO 为 MessagePack 的数组类型用来与 msgpack-java:0.6 保持兼容性

    在 msgpack-java 0.6 或者早期的版本中,POJO 在 MessagePack 中被序列化和反序列化为数组变量. 变量的顺序是基于 Java 类中变量的内部顺序了,这种本来是一种原生的序 ...