<!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. PAT Basic 1030 完美数列 (25 分)

    给定一个正整数数列,和正整数 p,设这个数列中的最大值是 M,最小值是 m,如果 M≤mp,则称这个数列是完美数列. 现在给定参数 p 和一些正整数,请你从中选择尽可能多的数构成一个完美数列. 输入格 ...

  2. 两步创建vue全局组件

    import Login from './Login' export default { install: function(Vue){ Vue.component('Login', Login); ...

  3. YII2.0.12兼容PHP7.2版本升级

    YII2.0.12兼容PHP7.2版本升级 报错信息: FastCGI sent in stderr: "PHP message: PHP Fatal error:  Cannot use ...

  4. python 示例代码2

    示例2:变量赋值,打印拼接(var.py) 变量定义的规则: 变量名只能是字母.数字或下划线的任意组合 变量名的第一个字符不能是数字 以下关键字不能声明为变量名 ['and', 'as', 'asse ...

  5. Linux文件归档管理

    Linux怎样保存文件 数据 - 这里数据就是文件的内容 元数据 - 在linux系统中,所有与某个文件相关的额外信息都保存在一个叫做i-节点(inode)的结构中 文件名 - 文件名保存在名为目录项 ...

  6. Hadoop下MapReduce实现Pi值的计算

    Hadoop自带的例子中,有一个计算Pi值的例子. 这个程序的原理是这样的.假如有一个边长为1的正方形.以正方形的一个端点为圆心,以1为半径,画一个圆弧,于是在正方形内就有了一个直角扇形.在正方形里随 ...

  7. POJ-3080-Blue jeans(KMP, 暴力)

    链接: https://vjudge.net/problem/POJ-3080#author=alexandleo 题意: 给你一些字符串,让你找出最长的公共子串. 思路: 暴力枚举第一个串的子串,挨 ...

  8. HDU 6047 - Maximum Sequence | 2017 Multi-University Training Contest 2

    /* HDU 6047 - Maximum Sequence [ 单调队列 ] 题意: 起初给出n个元素的数列 A[N], B[N] 对于 A[]的第N+K个元素,从B[N]中找出一个元素B[i],在 ...

  9. vue学习时遇到的问题（一）

    1.vue的异步组件,require()方法 作用是:在需要使用的时候,从 根目录/components/HelloWorld.vue 加载组件 import Vue from 'vue' impor ...

  10. php大文件传输断点续传源码

    1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc) APC实现方法: 安装APC,参照官方文档安装,可以使 ...