Layui 弹出层模块

Data: 2021-12-28 19:03:18Form: JournalClick: 10

# 弹出层模块

独立版本open in new window
官方文档open in new window

# 一、弹出层

# 1、`alert` 普通弹框

layer.alert(content, options, yes)

<script>
    layui.use("layer", function () {
        var layer = layui.layer;
        layer.alert("灭绝师太");
        layer.alert("西门大官人",{icon: 1});
        layer.alert("欧阳克",function(){
            console.log('匿名方法');
        });
    });
</script>

# 2、`confirm` 询问框

layer.confirm(content, options, yes, cancel)

layer.confirm("你是欧阳克吗?", { icon: 3, title: "疑问" }, function (index) {
  console.log(index);
  layer.close(index);
});

# 3、`msg` 提示框

layer.msg(content, options, end)

layer.msg("我是欧阳克");
layer.msg("我是欧阳克", { icon: 6 });
layer.msg("我是欧阳克", function () {
  console.log("欧阳克");
});

# 4、`load` 加载层

layer.load(icon, options)
- icon 支持传入 0-2

layer.load();
layer.load(1);
layer.load(2, { time: 2 * 1000 });

# 5、`tips` 吸附层

layer.tips(content, follow, options)

<div style="margin: 50px" id="test">
    <div>这里显示tip提示框</div>
</div>
<script>
    layui.use("layer", function () {
        var layer = layui.layer;
        layer.tips("tip提示框", "#test", {
            tips: 2,
        });
    });
</script>

# 6、`open` 核心方法

layer.open(options) 不管是使用哪种方式创建层，都是走 open()

layer.open({
  title: "标题",
  content: "我是欧阳克",
});

# 二、基础参数

参数名	数据类型	默认	作用
type	Number	0	layer 提供了 5 种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe 层）3（加载层）4（tips 层）
title	String/Array/Boolean	信息	`title` 支持三种类型的值：`title :'我是标题'`、`title: ['文本', 'font-size:18px;']`、`false`
content	String/DOM/Array		content 可传入的值是灵活多变的，不仅可以传入普通的 `html` 内容，还可以指定 `DOM`，更可以随着 `type` 的不同而不同
skin	String		样式类名，layer 皮肤制作说明open in new window
area	String/Array	auto	宽高，在默认状态下，`layer` 是宽高都自适应的
offset	String/Array	垂直水平居中	坐标
icon	Number	-1（信息框）/0（加载层）	图标，信息框和加载层的私有参数
btn	String/Array	确认	按钮，信息框模式时，`btn` 默认是一个确认按钮，其它层类型则默认不显示
btnAlign	String	r	按钮的排列位置
closeBtn	String/Boolean	1	关闭按钮，两种风格的关闭按钮，配置 1 和 2 来展示
shade	String/Array/Boolean	0.3	弹层外区域。默认是 0.3，定义别的颜色，可以 `shade: [0.8, '#393D49']`
shadeClose	Boolean	false	是否点击遮罩关闭弹层
time	Number	0	自动关闭所需毫秒
id	String	空字符	用于控制弹层唯一标识
anim	Number	0	弹出动画
isOutAnim	Boolean	true	关闭动画
maxmin	Boolean	false	该参数值对 `type:1` 和 `type:2` 有效。默认不显示最大小化按钮。需要显示配置 `true` 即可
fixed	Boolean	true	即鼠标滚动时，层是否固定在可视区域。如果不想，设置 `false` 即可
resize	Boolean	true	默认情况下，你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能，设置 `false` 即可。该参数对 `loading、tips` 层无效
resizing	Function	null	当你拖拽弹层右下角对窗体进行尺寸调整时，如果你设定了该回调，则会执行。回调返回一个参数：当前层的 `DOM` 对象
scrollbar	Boolean	true	默认允许浏览器滚动，如果设定 scrollbar: false，则屏蔽
maxWidth	Number	360	只有当 `area: 'auto'` 时，`maxWidth` 的设定才有效。
maxHeight	Number	无	只有当高度自适应时，maxHeight 的设定才有效。
zIndex	Number	19891014	一般用于解决和其它组件的层叠冲突。
move	String/DOM/Boolean	.layui-layer-title	默认是触发标题区域拖拽。如果你想单独定义，指向元素的选择器或者 `DOM` 即可。如 `move: '.mine-move'`。你还配置设定 `false` 来禁止拖拽
moveOut	Boolean	false	默认只能在窗口内拖拽，如果你想让拖到窗外，那么设定 `true` 即可
moveEnd	Function	null	默认不会触发 moveEnd，如果你需要，设定 `moveEnd: function(layero){}` 即可
tips	Number/Array	2	tips 层的私有参数。支持上右下左四个方向，通过 `1-4` 进行方向设定。如 `tips: 3` 则表示在元素的下面出现。定义颜色 `tips: [1, '#c00']`
tipsMore	Boolean	false	允许多个意味着不会销毁之前的 `tips` 层
success	Function	null	当你需要在层创建完毕时即执行一些语句，可以通过该回调。`success` 会携带两个参数，分别是当前层 `DOM` 当前层索引。
yes	Function	null	该回调携带两个参数，分别为当前层索引、当前层 DOM 对象。
cancel	Function	null	该回调携带两个参数，分别为当前层索引、当前层 DOM 对象。默认会自动触发关闭。如果不想关闭，return false 即可
end	Function	null	无论是确认还是取消，只要层被销毁了，end 都会执行，不携带任何参数。

# 1、信息框

<style>
    .test {
        border: 10px solid #e9e7e7;
        color: orange;
    }
</style>
<script>
    layui.use("layer", function () {
        var layer = layui.layer;
        layer.open({
            type: 0,
            title: "标题",
            content: "我是欧阳克",
            skin: "test",
            area: ["500px", "500px"], // area:"500px",
            offset: "lt",
            icon: 3,
            btn: ["按钮一", "按钮二", "按钮三"], //可以无限个按钮
            btn1: function (index, layero) {
                console.log("按钮一");
            },
            btn2: function (index, layero) {
                console.log("按钮二");
            },
            btn3: function (index, layero) {
                console.log("按钮三");
            },
            btnAlign: "c",
            closeBtn: 2,
            shade: 0.5,
            shadeClose: true,
            time: 1000,
            anim: 2,
            resize: true,
            success(index, layero) {
                console.log("弹出成功");
            },
            yes(index, layero) {
                console.log("点击确定按钮");
            },
            cancel(index, layero) {
                console.log("点击取消按钮");
            },
        });
    });
</script>

# 2、页面层

layer.open({
  type: 1,
  title: "标题",
  content:
    '<form style="margin:20px;" class="layui-form layui-form-pane" action=""><div class="layui-form-item"><label class="layui-form-label">输入框</label><div class="layui-input-block"><input type="text" placeholder="请输入标题" class="layui-input" /></div></div></form>',
});

# 3、`iframe` 层

layer.open({
  type: 2,
  title: "欧阳克",
  content: "http://www.ouyangke.cn",
});

# 4、加载层

layer.open({
  type: 3,
});

# 5、`tips` 层

<div style="margin: 150px" id="test">
  <div>这里显示tip提示框</div>
</div>;
<script>
    layui.use("layer", function () {
        var layer = layui.layer;
        layer.open({
            type: 4,
            content: ["我是欧阳克", "#test"],
            tips: 1,
        });
    });
</script>

# 三、其他方法

# 1、关闭指定层

layer.close(index)

var index = layer.alert("灭绝师太");
layer.close(index);

layer.open({
  type: 0,
  title: "标题",
  content: "我是欧阳克",
  yes(index, layero) {
    console.log("点击确定按钮");
    layer.close(index);
  },
});

# 2、最大化

layer.full()

var index = layer.alert("灭绝师太");
layer.full(index);

layer.full(
  layer.open({
    type: 2,
    title: "欧阳克",
    maxmin: true,
    content: "http://www.ouyangke.cn",
  })
);

备：其他方法
- layer.closeAll() 关闭所有层
- layer.min() 最小化
- layer.restore() 恢复弹窗
- layer.style() 重新定义层的样式
- layer.title() 改变层的标题
- layer.iframeAuto() 指定 iframe 层自适应
- layer.iframeSrc() 重置特定 iframe url
- layer.setTop() 置顶当前窗口
- layer.getChildFrame() 获取 iframe 页的 DOM
- layer.getFrameIndex() 获取特定 iframe 层的索引

# 四、其他层

# 1、输入层

layer.prompt(options, yes)

layer.prompt(
  {
    formType: 2, //输入框类型，支持0（文本）默认1（密码）2（多行文本）
    value: "我是欧阳克",
    title: "请输入老师介绍",
    area: ["800px", "350px"],
  },
  function (value, index, elem) {
    console.log(value);
    layer.close(index);
  }
);

# 2、`tab` 层

layer.tab({
  area: ["600px", "300px"],
  tab: [
    {
      title: "TAB1",
      content: "灭绝师太",
    },
    {
      title: "TAB2",
      content: "西门大官人",
    },
    {
      title: "TAB3",
      content: "欧阳克",
    },
  ],
});

# 3、相册层

layer.photos({
  photos: {
    title: "", //相册标题
    id: 123, //相册id
    start: 1, //初始显示的图片序号，默认0
    data: [
      //相册包含的图片，数组格式
      {
        alt: "图片1",
        pid: 1, //图片id
        src: "https://img.php.cn/upload/article/000/000/003/60c034e9d3595631.jpg", //原图地址
        thumb:
          "https://img.php.cn/upload/article/000/000/003/60c034e9d3595631.jpg", //缩略图地址
      },
      {
        alt: "图片2",
        pid: 2, //图片id
        src: "https://img.php.cn/upload/article/000/000/003/6093abebf1766794.jpg", //原图地址
        thumb:
          "https://img.php.cn/upload/article/000/000/003/6093abebf1766794.jpg", //缩略图地址
      },
      {
        alt: "图片3",
        pid: 3, //图片id
        src: "https://img.php.cn/upload/article/000/000/001/5fabba9a8557c153.jpg", //原图地址
        thumb:
          "https://img.php.cn/upload/article/000/000/001/5fabba9a8557c153.jpg", //缩略图地址
      },
    ],
  },
  anim: 5, //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});

我是 PHP 程序员

Layui 弹出层模块

# 弹出层模块

# 一、弹出层

# 1、alert 普通弹框

# 2、confirm 询问框

# 3、msg 提示框

# 4、load 加载层

# 5、tips 吸附层

# 6、open 核心方法

# 二、基础参数

# 1、信息框

# 2、页面层

# 3、iframe 层

# 4、加载层

# 5、tips 层

# 三、其他方法

# 1、关闭指定层

# 2、最大化

# 四、其他层

# 1、输入层

# 2、tab 层

# 3、相册层

# 1、`alert` 普通弹框

# 2、`confirm` 询问框

# 3、`msg` 提示框

# 4、`load` 加载层

# 5、`tips` 吸附层

# 6、`open` 核心方法

# 3、`iframe` 层

# 5、`tips` 层

# 2、`tab` 层