layui 常用确认框、提示框 demo

 

 

DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>开始使用layuititle>
        <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>

    

      


    <body>
        
        <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>

 

转载于:https://www.cnblogs.com/libin6505/p/10881817.html

你可能感兴趣的:(layui 常用确认框、提示框 demo)