Layui快速入门之第十一节弹出层

最新推荐文章于 2024-06-06 23:20:58 发布

渊婉

最新推荐文章于 2024-06-06 23:20:58 发布

阅读量3.3k

点赞数 3

分类专栏： Layui 文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/qq_61313896/article/details/132901112

版权

一：基本用法

弹出层组件 layer 是 Layui 最古老的组件，也是使用覆盖面最广泛的代表性组件。 layer 集众多弹层功能为一体，灵活而多样，是许多开发者的网页弹出层的首选交互方案，在各类业务场景都能发挥重要作用

场景	用前准备	使用方式
作为独立组件使用	你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js	通过script标签引入layer.js后，直接用即可
模块化使用	如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入JQuery和 layer.js，但需要引入layui.css和layui.js	通过layui.use(‘layer’, callback)加载模块

API

API	描述
var layer = layui.layer	获得 `layer` 模块。
弹出 :	-
layer.open(options)	打开弹层，核心方法。下述所有弹出方式均为该方法的二次封装
layer.alert(content, options, yes)	弹出 `dialog` 类型信息框。
layer.confirm(content, options, yes, cancel)	弹出 `dialog` 类型询问框。
layer.msg(content, options, end)	弹出 `dialog` 类型提示框。
layer.load(icon, options)	弹出 `loading` 类型加载层。
layer.tips(content, elem, options)	弹出 `tips` 类型贴士层。
layer.prompt(options, yes)	弹出 `page` 类型输入框层。
layer.photos(options)	弹出 `page` 类型图片层。
layer.tab(options)	弹出 `page` 类型标签页层。
关闭 :	-
layer.close(index)	关闭对应的层，核心方法。
layer.closeAll(type)	关闭所有对应类型的层。
layer.closeLast(type) 2.8+	关闭最近打开的对应类型的层。
其他 :	-
layer.config(options)	全局配置默认属性。
layer.ready(callback)	样式初始化就绪。
layer.style(index, css)	重新设置弹层样式。
layer.title(title, index)	设置弹层的标题。
layer.getChildFrame(selector, index)	获取 iframe 页中的元素。
layer.getFrameIndex(window.name)	在 iframe 页中获取弹层索引。
layer.iframeAuto(index)	设置 iframe 层高度自适应。
layer.iframeSrc(index, url)	重新设置 iframe 层 URL。
layer.index	获取最新弹出层的索引
layer.zIndex	获取最新弹出层的层叠顺序
layer.setTop(layero)	将对应弹层的层叠顺序为置顶。
layer.full(index)	设置弹层最大化尺寸。
layer.min(index)	设置弹层最小化尺寸。
layer.restore(index)	还原弹层尺寸。

打开弹层

layer.open(options);

参数 options : 基础属性配置项。#详见属性

打开弹层的核心方法，其他不同类型的弹出方法均为该方法的二次封装

// 该方法返回当前层的唯一索引，以便其他方法对该弹层进行相关操作
var index = layer.open({
  type: 1, // page 层类型，其他类型详见「基础属性」
  content: '<div style="padding: 16px;">test</div>'
});

基础属性

属性名描述类型默认值

type

属性名	描述	类型	默认值
type	弹层类型。可选值有： `0` dialog 信息框 `1` page 页面层 `2` iframe 内联框架层 `3` loading 加载层 `4` tips 贴士层 `layer` 弹层由以上 5 种类型构成。不同的类型代表不同的弹出形态，`layer` 提供的所有的弹出方式均由此衍生。	number	`0`
title	弹层标题。其值支持以下可选类型：若为 `string` 类型 : 则表示为弹层的标题文本，如： `title: '标题'` 若为 `array` 类型 : 则可设置标题文本和标题栏 CSS 样式： `title: ['标题', 'font-size: 18px;']` 若为 `boolean` 类型 : 则可设为 `false` 不显示标题栏。 `title: false // 不显示标题栏`	string array boolean	`信息`
content	弹层内容。可传入的值比较灵活，支持以下使用场景：若 `type: 1`（页面层）: 则 `content` 可传入值如下： `// 普通字符` `layer.open({` `type: 1,` `content: '传入任意文本或 HTML'` `});` `// 捕获页面已存在的 DOM 元素或 jQuery 对象` `layer.open({` `type: 1,` `content: $('#id') // 捕获层` `});` 注意：若采用捕获层，则捕获的元素必须存放在 `<body>` 根节点下，否则可能被父级容器的相对定位所影响。若 `type: 2`（iframe 层）: 则 `content` 可传入值如下： `// iframe URL` `layer.open({` `type: 2,` `content: 'http://cn.bing.com' // URL` `});` `// 是否屏蔽 iframe 滚动条` `layer.open({` `type: 2,` `// 数组第`

弹层类型。可选值有：