Layui对话框弹出层效果

一、引入CSS、JS文件

  
<!--引入官方在线的css和JS-->
<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css?t=1586046995289" media="all">

<script src="//res.layui.com/layui/dist/layui.js?t=1586046995289"></script>

二、layer.open的五种弹出方式

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

//这个是一个iframe层
layui.use('layer', function () {
    var layer = layui.layer;
    //iframe层demo
    layer.open({
        type: 2,
        title: 'type 2'
        , content: 'https://www.baidu.com'
    });
}); 

//这是一个页面层  
layui.use('layer', function () {
    var layer = layui.layer;
    //iframe层demo
    layer.open({
        type: 1,
        title: 'content中绑定Dom元素的Id'
        , content: '#DomId'
    });
}); 

layui.use('layer',function(){
    var layer=layui.layer;
    layer.open({
        type:1,
        content:'<div> 弹出</div>',
        btn:['按钮一','按钮二','按钮三'],  
        area: ['80%', '60%'],
        success:function(index,layero)
        {
            //窗体弹出后回调方法
           
        },
        yes:function(index,layero)
        {
           //点击按钮一后回调方法
           layer.close(index);//需手动关闭 弹出层
        },
        btn2:function(index,layero){
            //点击按钮二后回调方法
        },
        btn3:function(index,layero){
            //点击按钮三后回调方法
        },
        cancel:function(){
            //点击右上角关闭后回调方法
        },
        end:function(){
            //窗体已经关闭后回调
        }
     });
});

其他回调：full 、min、restore    最大化、最小化、还原后触发的回调

三、layer.msg信息框

layui.use('layer',function(){
    layer=layui.layer;
    layer.msg('有表情地提示',{
        icon:1
    });
});

layui.use('layer',function(){
    layer=layui.layer;
    layer.msg('同上', {
      icon: 1,
      time: 2000 //2秒关闭（如果不配置，默认是3秒）
    }, function(){
      //关闭后执行
    });
});

四、layer.load()-加载层

官方使用方法：layer.load(icon,options)

layui.use('layer', function () {
    layer = layui.layer;
    //重载1
    var index = layer.load();
    //重载2
    var index = layer.load(1); //换了种风格
    //重载3
    var index = layer.load(2, { time: 5000 }, function () { }); //设定最长等待5秒 
});

五、layer.confirm()-询问框

官方使用方法：layer.confirm(content,options,yes,cancel)

layui.use('layer', function () {
    layer = layui.layer;
    layer.confirm('确定关闭嘛?', { icon: 3, title: '提示' }, function (index) {
        //点击确定的回调
        layer.close(index);
    });
});

六、layer.alert(content,opeions,yes)-普通信息框

官方使用方法：layer.alert(content,opeions,yes)

layui.use('layer', function () {
    layer = layui.layer;
    //重载一
    layer.alert('提示内容');
    //重载二
    layer.alert('有了图标', { icon: 1 }); 
    //重载三
    layer.alert('有了回调',{ icon: 1 }, function (index) {
        //确定按钮回调
        layer.close(index);
    });
});

七、关闭弹出层

layer.closeAll('loading'); //关闭加载层
layer.closeAll('tips'); //关闭所有的tips
layer.closeAll('dialog'); //关闭信息框
layer.closeAll('page'); //关闭所有页面层
layer.closeAll('iframe'); //关闭所有的iframe
layer.closeAll(); //关闭所有

layer.close(index); //关闭指定层
layer.close(layer.index); //关闭最新弹出的层

//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭