layui/docs/layer/examples/alert.md

<div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-alert">对话框带图标</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-confirm">询问框</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-msg-dark">深色提示框</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-msg-light">浅色提示框</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-alert-btn">自定义按钮</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-count-down">关闭倒计时</button>
</div>

<!-- import layui --> 
<script>
layui.use(function(){
  var layer = layui.layer;
  var util = layui.util;

  // 事件
  util.on('lay-on', {
    "test-alert": function(){
      // 示范对话框所有内置图标
      var icon = 0;
      (function changeIcon(){
        layer.alert('点击确定，继续查看图标', {
          icon: icon,
          shadeClose: true,
          title: 'icon: '+ icon
        }, ++icon > 6 ? function(){
          layer.msg('内置图标演示完毕', {icon: 1});
        } : changeIcon);
      }());
    },
    "test-confirm": function(){
      layer.confirm('一个询问框的示例？', {icon: 3}, function(){
        layer.msg('点击确定的回调', {icon: 1});
      }, function(){
        layer.msg('点击取消的回调');
      });
    },
    "test-msg-dark": function(){
      layer.msg('深色提示框的示例');
    },
    "test-msg-light": function(){
      layer.msg('浅色提示框的示例', {icon: 0}, function(){
        // layer.msg('提示框关闭后的回调');
      });
    },
    "test-alert-btn": function(){
      layer.alert('自定义按钮', {
        btn: ['按钮一', '按钮二', '按钮三'],
        btnAlign: 'c', // 按钮居中显示
        btn1: function(){
          layer.msg('按钮一的回调');
        },
        btn2: function(){
          layer.msg('按钮二的回调');
        },
        btn3: function(){
          layer.msg('按钮三的回调');
        }
      });
    },
    "test-count-down": function(){
      layer.alert('在标题栏显示自动关闭倒计秒数', {
        time: 5*1000,
        success: function(layero, index){
          var timeNum = this.time/1000, setText = function(start){
            layer.title('<span class="layui-font-red">'+ (start ? timeNum : --timeNum) + '</span> 秒后自动关闭', index);
          };
          setText(!0);
          this.timer = setInterval(setText, 1000);
          if(timeNum <= 0) clearInterval(this.timer);
        },
        end: function(){
          clearInterval(this.timer);
        }
      });
    }
  })
});
</script>