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为必填项（信息框除外）

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

属性	作用	参数类型	案例
title	标题	string，Array，Boolean	title: '标题', title: ['标题', 'font-size:18px;']，数组第二项可以写任意CSS样式     title:false,可以不显示标题栏
content	内容	string，Array，DOM	content:"提示消息"，  content:"#test"，
area	窗体大小 宽、高	string，Array	area: '500px', area: ['80%', '60%']
offset	坐标	string，Array	offset: ['100px', '50px'] 同时定义top、left坐标
type	弹出类型	int	type:2,

layer.open的回调: 

layui.use('layer',function(){
    var layer=layui.layer;
    layer.open({
        type:1,
        content:'<div> 弹出</div>',
        btn:['按钮一','按钮二','按钮三'],  
        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
    });
});

 

属性	作用	参数类型	案例
icon	图标	int	icon: 0,
time	显示时间	string	time:2000

 

 

 

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); //再执行关闭