Layui 6 Layer 弹出层组件

最新推荐文章于 2025-06-14 10:00:00 发布
最新推荐文章于 2025-06-14 10:00:00 发布
阅读量1.6k 收藏 12
点赞数 11
CC 4.0 BY-SA版权
分类专栏： layui 文章标签： layui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/monian187/article/details/147071466

在这里插入图片描述

1、概述

特殊：layer 单独使用。
在引入 layui.js 后，不需要加载 layer 模块 即可直接使用 全局变量 layer。

2、使用场景

作为独立组件使用 >

  • 不依赖 layui.css；（layer 内置了轻量级加载器，所以你根本不需要单独引入 css 等文件）
  • 不依赖 layui.js;
  • 依赖 jq；

作为 layui 模块化 使用

3、方法

.config()

  /**
  * @brief: layer 全局配置
  * @param {Object} opts
  * @return {*}
  */
 // layer.config(opts)
 
 layer.config({
   anim: 3, // 动画从左滑入
   skin: 'layui-layer-molv', //默认皮肤
   offset: ['100px', '50px'], // 自定义位置
   extend: 'myskin/style.css', // 使用功能拓展的皮肤
 })

【说明】
1、重要
权重很大，模块化加载 layer 时，必须用到它；
配置路径、加载模块；
设置弹层默认参数；
2、不重要
不怎么用到，但是要知道有这么个 api；
但不是经常用到；

【示例】全局layer 配置？

.ready()

【场景】由于我们的 layer 内置了轻量级加载器，所以你根本不需要单独引入 css 等文件。

【解决】 但是加载总是需要过程的。当你在页面一打开就要执行弹层时，你最好是将弹层放入 ready 方法中。

【总结】虽然 layer 内置了加载器，但加载卡顿时，会造成样式后出来，所以会有弹出层样式闪动现象。这时就需要使用 layer.ready()

layer.ready(function () {
  // 在layer初始化就绪后，再执行 layer.msg()
  layer.msg('很高兴一开场就见到你')
})

【示例】layer 加载完成后执行

.open()

【简介】
露脸率最高的方法；
不管是使用哪种方式创建层，都是走 layer.open()；

【语法】

/**
* @brief: 打开信息提示框；
* @param {Object} options, layer配置参数；
* @return {number} index 返回一个当前层的索引值
* #序号索引值 不是随机的；（按当前存在/未关闭 layer 从 1 开始自增赋值）1, 2, 3...）
* !序号索引值 作为 关闭层 api layer.close(index) 传入的参数（作为定位某个层的手段）；
*/
// var index = layer.open(options)

【示例】layer 加载完成后执行

下面 api 打开不同样式的提示框。

.alert()

/**
* @brief: 普通信息框；（有些高调，一般用于对用户造成比较强烈的关注）
* 类似系统 alert，但却比 alert 更灵便。
* @param {String} text, 提示信息的内容；
* @param {Object} options, layer配置参数；
* @param {Function} callback(index), 点击“确定”按钮后执行的回调；
* index, 当前提示框 index 索引值；
* ! 参数自动向左补齐，第2,3参数都可略去；
* @return {*}
*/
//  layer.close(text[, options], callback(index))

// eg1: 纯文字提示
// layer.alert('只想简单的提示');

// eg2: 加了个图标
// layer.alert('加了个图标', { icon: 1 }); //这时如果你也还想执行yes回调，可以放在第三个参数中。

//eg3
layer.alert('有了回调', function (index) {
  //do something

  layer.close(index)
  console.log('alert框， yesCallback')
})

【示例】layer 加载完成后执行

.confirm()

/**
* @brief: 打开信息提示框；
* 类似系统 confirm，但却远胜 confirm，另外它 **不是和系统的 confirm 一样阻塞** 你需要把交互的语句放在回调体中。
* @param {String} text, 提示信息的内容；
* @param {Object} options, layer配置参数；
* @param {Function} callback(index), 点击“确定”按钮后执行的回调；
* index, 当前提示框 index 索引值；
* ! 参数自动向左补齐，第2,3参数都可略去；
* @return {*}
*/
//  layer.confirm(text[, options], callback(index))

//eg1
layer.confirm(
  'is not?',
  { icon: 3, title: '提示' },
  function (index) {
    //do something
    console.log('确认后的回调', '索引值', index)
    layer.close(index)
  },
  function (index) {
    console.log('取消后的回调', '索引值', index)
    layer.close(index)
  }
)

【示例】layer 加载完成后执行

.msg()

/**
* @brief: 轻提示弹窗；
* 使用频率很高；（轻提示）；默认 3s 自动消失；
* @param {String} content, 提示文本内容；
* @param {Object} [, options], 配置参数项；
* @param {Function} [, end], 执行结束的回调；
* @return {*}
*/
// layer.msg(content[, options][, end])

//eg1
// layer.msg('只想弱弱提示');

// //eg2
// layer.msg('有表情地提示', { icon: 6 });

// //eg3
// layer.msg('关闭后想做些什么', function () {
//   //do something
// });

//eg
layer.msg(
  '同上',
  {
    icon: 1,
    time: 2000, // 2秒关闭（如果不配置，默认是3秒）
  },
  function () {
    //do something
    console.log('文字提示结束后，执行')
  }
)

【示例】layer 加载完成后执行

.load()

/**
* @brief: 新建加载层；
* ! 注意1：load 默认是不会自动关闭的，因为你一般会在 ajax 回调体中关闭它。
* ! 注意2：弹出层未关闭时，底部内部不允许点击。
* @param {number} [type], 配置参数项；对应3种不同的加载层动画；
* 值：
* 0(默认) 
* 1 
* 2 
* @return {*}
*/

【type 参数对应的加载动画】0,1,2 分别对应下图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
【示例】load 加载层

.tips()

/**
* @brief: 吸附弹出框（默认是在元素右边弹出，可 智能定位，即灵活地判断它应该出现在哪边）
* @param {String} content, 提示文本内容
* @param {String} follow, 吸附的容器
* #值：jq选择器
* #this：指向事件回调调用者元素；
* @param {Object} [, options], 配置参数项；
* @return {*}
*/
// layer.tips(content, follow[, options])

【示例1】

// 置为已评价提示语
$('.setEvaluate').mouseover(function () {
  // 鼠标引入时出现吸附提示框
  tips_index = layui.layer.tips(
    "<span style='color:black;font-size: 14px;'>只能将已完成状态的任务置为已评价</span>",
    this, // 吸附在当前事件调用者容器上
    { tips: [3, '#D3D3D3'], area: ['auto', 'auto'], time: 0 }
  )
})

渲染如下：
在这里插入图片描述

【示例】吸附弹出层

.close()

/**
* @brief: 关闭指定弹出层
* @param {Number} layerIndex, 关闭弹层的索引值
* #常规值：某个弹层的索引值
* #layer.index：获取的始终是最新弹出的某个层的索引值，值是由layer内部动态递增计算的
* !特殊：iframe 页面关闭自身
* var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
* parent.layer.close(index) // 再关闭
* @param {Function} [, callback], 关闭弹出层后执行的回调
* #layui 2.6.5、layer 3.4.0 新增
* @return {*}
*/
// layer.close(layerIndex [, callback]);

【示例】关闭某个弹出层

.closeAll()

/**
* @brief: 关闭（某个类型的）所有弹出层
* @param {Number} [type], 弹层类型
* 无参：关闭所有弹出层
* "dialog", 信息框
* "page", 页面层
* "iframe", iframe层
* "loading", 加载层
* "tips", tips层
* @return {*}
*/
// layer.closeAll([type]);

【示例】关闭所有弹出层

.style()

/**
* @brief: 重新给层设置样式
* !对 loading 层和 tips 层无效
* @param {Number} index, 某层的索引值
* @param {Object} options, 任意的（大驼峰）CSS样式名&键值对
* @return {*}
*/
// layer.style(index, options);
// 对loading层和tips层无效

【示例】单独给层设置样式

.title()

/**
* @brief: 改变层的标题
* @param {String} text, 层标题文字；
* @param {Number} index, 对应层索引值；
* @return {*}
*/
// layer.title(text, index)

【示例】层标题

.getChildFrame()

/**
* @brief: （当前页）获取 ifram页的 DOM元素
* !这里的 demo 需要服务端支持，否则会报跨域错误；
* @param {String} selector 选择器，即需要获取的iframe页的 元素的选择器
* @param {Number} index 弹出层索引值
* @return {*}
*/
// var body = layer.getChildFrame("body", index);
// 再做其它操作
body.find('input').val('Hello layer')

【示例】获取 iframe 页

.getFrameIndex()

// 用于在 iframe 页内部获取当前 iframe 弹层的索引，以便关闭自身。
var index = parent.layer.getFrameIndex(window.name) // 获取当前 iframe 层的索引
parent.layer.close(index) // 关闭当前 iframe 层

.iframeAuto(index)

可让 iframe 高度跟随内容自适应。

layer.open({
  type: 2, // iframe 层
  content: '/layer/test/iframe.html',
  area: '600px', // 弹层初始宽度
  success: function(layero, index, that){
    layer.iframeAuto(index); // 让 iframe 高度自适应
    that.offset(); // 重新自适应弹层坐标
  }
});

【示例】iframe 层高度自适应

.iframeSrc()

/**
 * @brief: 重新设置 iframe 层 URL
 * @param {number} index 打开弹层时返回的唯一索引
 * @param {string} url URL地址
 * @return {*}
 */

layer.iframeSrc(index, url)


// 示例
// 打开弹层
var index = layer.open({
  type: 2, // iframe 层
  content: '/layer/test/iframe.html'
}); 
// 重置 iframe 页面 URL
layer.iframeSrc(index, 'https://cn.bing.com/');

【示例】重新设置 iframe 层 URL

.setTop()

【语法】

// 多弹层模式的层叠顺序置顶
layer.open({
  type: 1, // 页面层
  shade: false,
  area: ['520px', '320px'],
  maxmin: true,
  content: '<div style="padding: 16px;">多弹层模式的层叠顺序置顶</div>',
  zIndex: layer.zIndex, // 重点 1 --- 初始设置当前最高层叠顺序，
  success: function(layero){
    layer.setTop(layero); // 重点 2 --- 保持选中窗口置顶
  }
});

【示例】置顶某个层

.full(), .min(), .restore()

【语法】

// 执行最大化
layer.full(index)

// 执行最小化
layer.min(index)

// 还原弹层
layer.restore(index)

【示例】最大最小还原层

4、基础参数

type

【键】设置弹窗基本类型。
【键值】{number}

  • 0 信息框（默认）
  • 1 页面层
  • 2 iframe层
  • 3 加载层
  • 4 tips层

【渲染】
0 信息框（默认）
在这里插入图片描述
1 页面层在这里插入图片描述
2 iframe层
在这里插入图片描述
3 加载层
在这里插入图片描述
4 tips层
在这里插入图片描述
【示例】不同弹窗类型

title

【键】设置标题内容和样式。
【键值】
{string} 纯文本，示例：‘我是标题’
{array} 数组参数（字符串内容+样式），示例：[‘标题文本’, ‘font-size: 32px; color: red;’]
{boolean} false 不显示标题
tip: !不显示是连带 “标题”位置全部消失
【示例】标题

content

【键】设置弹窗内容。
【键值】

{string} 普通 html 内容（会解析 html） ， 示例：'<h2>content参数配置的：普通html内容</h2>'

{dom} jq选择器
!注意1：最好该元素要存放在 body 最外层（body内一级位置），否则可能被其他的相对元素所影响（下面的 p#contentdom）
!注意2：type: 2 时正常； type: 1 时会出现 [object, object]
!注意3：作为 dom 的弹窗内容默认应该是隐藏的

【示例】主体内容

skin

【键】设置样式类名。
全局使用：使用 layer.config({skin: ‘xxx’}) 可设置 layer 的皮肤。
【键值】
（默认值）例如 ‘layui-layer-molv’, ‘layui-layer-lan’
在这里插入图片描述
（自定义值）
1、自定义的 class 名（下面的 demo-class）（定义在上面的 style 标签内）

const opts = {
	skin: 'demo-class',
}

2、定义皮肤对应的样式；

/* skin 对应 自定义样式名 ----------------------start */
body .demo-class .layui-layer-title {
  /* 标题区域 */
  background: #c00;
  color: #fff;
  border: none;
}

body .demo-class .layui-layer-btn {
  /* 按钮区域上方的分割线 */
  border-top: 1px solid #e9e7e7;
}

body .demo-class .layui-layer-btn a {
  /* 确定按钮 */
  background: #333;
}

body .demo-class .layui-layer-btn .layui-layer-btn1 {
  /* 取消按钮 */
  background: #999;
}

#contentdom {
  width: 40px;
}
/* skin 对应 自定义样式名 ----------------------start */

3、渲染皮肤如下；
在这里插入图片描述

【注意】单个配置skin的优先级更高。

【示例】自定义皮肤

area

【键】设置弹出层区域尺寸。
【键值】
{string}
‘auto’ 默认状态下，layer 是宽高都自适应的；
‘600px’ 一个值，自定义宽度，高度自适应；
{array}
[‘600px’, ‘400px’] 宽高都自定义 （原先内容可能会溢出）

【示例】尺寸大小

maxWidth

【键】设置弹出层最大宽。
【键值】
{string|number} 360 默认最大宽度尺寸

【示例】最大宽

maxHeight

【键】设置弹出层最大宽。
【键值】
{string|number} 240 默认最大高度尺寸

【注意】
只有当 area 值为 ‘auto’ 时， maxWidth, maxHeight 的设定值才有效。
!且这里不需要 px 单位

【示例】最大高

offset

【键】弹出层偏移位置。
【键值】
{string}
（1）一个值；
‘auto’ （默认） 水平&垂直 都居中。
‘100px’ 只有一个值，只定义 top 坐标，水平保持居中。
（2）快捷值
‘t’ : 快捷设置顶部坐标；
‘r’ : 快捷设置右边缘坐标；
‘b’ : 快捷设置底部坐标；
‘l’ : 快捷设置左边缘坐标；
‘lt’ : 快捷设置左上角；
‘lb’ : 快捷设置左下角；
‘rt’ : 快捷设置右上角；
‘rt’ : 快捷设置右下角；

{array}
（3）2个值；
[‘100px’, ‘50px’]

【示例】最大高

icon

【键】设置 信息框 & 加载层 图标。
【键值】{|number}

  • -1 不显示图标；
  • 0 "黄色-叹号"图标；
  • 1 "绿色-对号"图标；
  • 2 "红色-叉号"图标；
  • 3 "黄色-问号"图标；
  • 4 "灰色-锁"图标；
  • 5 "橙色-苦脸"图标；
  • 6 "绿色-笑脸"图标；

【渲染】
0:
在这里插入图片描述
1:
在这里插入图片描述

2:
在这里插入图片描述
3:
在这里插入图片描述
4:
在这里插入图片描述
5:

在这里插入图片描述
6:
在这里插入图片描述

【示例】最大宽

btn, yes/btn1, btn2, …

【键】type: 0 弹出层为信息框时，btn默认是一个确认按钮。
!其他层类型默认不显示；加载层和 tips 层则无效。
【键值】
{string} 定义一个按钮时，用字符串表示。例如：‘我知道了’
{array} 定义多个按钮时，用数组格式表示，字符串元素为按钮文字。例如：[‘yes’, ‘no’]，[‘按钮 1’, ‘按钮 2’, ‘按钮 3’]

【按钮对应回调】
按钮 1 的回调是 yes/btn1: function(){ }；
而从按钮 2 开始，则回调为 btn2: function(){}，以此类推。
【示例】最大宽

btnAlign

【键】按钮对齐方式。
【键值】{string}

  • ‘l’ 按钮左对齐；
  • ‘c’ 按钮居中对齐；
  • ‘r’ 按钮右对齐；（默认值）

closeBtn

【键】关闭按钮风格。
【键值】{number}

  • 0：不显示
  • 1：风格1；（默认）样式为旋转45度的十字图标；
  • 2：风格2；定位在右上角的圆形关闭图标；

【渲染】
1：
在这里插入图片描述
2：
在这里插入图片描述
【示例】最大宽

cancel

【键】右上角关闭按钮触发的回调。
【键值】{function}

/**
* @brief: 右上角关闭按钮触发的回调
* @param {number} index 当前层索引参数
* @param {number} layero 当前层的 DOM 对象
*/
cancel: function(index, layero) {

}

【示例】最大宽

end

【键】层结束的回调。
！!无论是确认还是取消，只要层被销毁了，end 都会执行，不携带任何参数
【键值】{function} 回调无参

end: function () {
 console.log('层-结束的回调')
},

【示例】最大宽

shade

【键】配置遮罩。
【键值】
{number} 小数，设置遮罩透明度；

{array} 定义透明度和颜色。例如：[0.8, ‘#00f00’]。

【示例】遮罩样式

shadeClose

【键】是否点击遮罩关闭。
【键值】{boolean}
false （默认）点击遮罩不关闭。
true 关闭

【示例】点击遮罩关闭

time

【键】设置自动关闭弹出层所需的毫秒数。
tip：默认不会自动关闭，且自动关闭前手动关闭仍有用。
【键值】{number} 例如：4000。
【示例】层自动关闭

id

【键】用于控制弹层唯一标识。
!设置该值后，不管是什么类型的层，都只允许同时弹出一个。
!一般用于页面层和 iframe 层模式。
【键值】{number} 默认 0，例如：2000。
【示例】层 id 值限制同时只能出现一个

anim

【键】弹出动画。
兼容：我们的出场动画全部采用 CSS3。这意味着除了 ie6-9，其它所有浏览器都是支持的。
！v3.0 之前的版本用的是 shift 参数。
【键值】{number}

  • -1：关闭；
  • 0：平滑放大（默认）；
  • 1 从上滑落；
  • 2 从最底部往上滑入
  • 3 从左滑入；
  • 4 从左翻滚
  • 5 渐显；
  • 6 抖动；

【示例】层弹出动画

isOutAnim

【键】关闭动画。
版本：layer 3.0.3 新增。
!该参数值对 type:1 和 type:2 有效。
一般保持默认即可。
【键值】{boolean}
true （默认）默认情况下，关闭层时会有一个过度动画。
false 不想开启。

【示例】层弹出动画

fixed

【键】鼠标滚动时，层是否固定在可视区域。
【键值】{boolean}
true （默认）层是固定的，页面滚动，层不动。
false 不固定后，层随页面滚动而滚动。
【示例】层弹出动画

resize

【键】层是否允许拉伸。
!该参数对 loading, tips 层无效
【键值】{boolean}
true （默认）可以在弹层右下角拖动来拉伸尺寸（仅右下角可用）。
false 不允许，屏蔽该功能。
【示例】层弹出动画

scrollbar

【键】是否允许浏览器出现滚动条。
!该参数对 loading, tips 层无效
【键值】{boolean}
true （默认）层打开后，允许浏览器滚动。
false 弹窗打开后，不允许浏览器出现滚动条。
【示例】层弹出动画

zIndex

【键】设置层层叠顺序。
!!实际渲染的值会比设置的值大1
【键值】{number} 例如：1212

【示例】层弹出动画
渲染：
在这里插入图片描述

move

【键】触发层拖拽的元素。（指向元素的 选择器|DOM）
【键值】
{string} ‘.layui-layer-title’ 默认是触发标题区域拖拽。
{boolean} false 禁止拖拽。
{HTMLElement} div dom元素
【示例】层弹出动画

moveOut

是否允许拖拽到窗口外。
false （默认）只能在窗口内拖拽。

moveEnd

/**
* @brief: 拖动完毕后的回调方法
* @param {dom} layero 为当前层的 DOM 对象
* @return {function}
*/
moveEnd: function (layero) {
 console.log('弹层拖动完毕')
 console.log(layero.html())
},

tips

【键】tips 层的私有参数。
【键值】
{number} 支持 上, 右, 下, 左 四个方向 (1, 2, 3, 4)
{array} [1, ‘#c00’]，还可以定义一些颜色。
【示例】层弹出动画

tipsMore

是否允许多个 tips。
false（默认）不允许多个 tips。
【示例】层弹出动画

success

/**
* @brief: 层创建完毕时执行的回调
* @param {HTMLElement} layero 当前层 DOM对象
* @param {number} index 当前层的索引值
*/
success: function (layero, index) {
 console.log(layero.html())
 setTimeout(function () {
   layer.close(index)
 }, 2000)
},

【示例】层弹出动画

maxmin

【键】是否开启标题栏的最大化和最小化图标。。
【键值】{boolean}
false （默认）不允许最大最小化。
true 开启~，见下。
在这里插入图片描述
【示例】最大最小化

回调

  • end 结束的回调；（涉及到 btn 配置项）
  • full 最大化后 触发的回调；
  • min 最小化后 触发的回调；
  • restore 还原后触发的回调；
  • minStack 是否默认堆叠在左下角

【示例】层弹出动画

5、其它层

见文档，暂未用到 。

layer窗口弹出
04-22
layer，一个可以让你想到即可做到的web弹窗（层）解决方案（js组件），作者贤心（菜鸟级前端攻城师）。layer侧重于用户灵活的自定义，为不同人的使用习惯提供动力。其意义在于，可以让您的页面拥有更丰富与便捷的操作体验，而这，您只需在调用时简单地配置相关参数，即可轻松实现。
layer弹出层
weixin_50139963的博客
08-16 2607
一：layer弹出层 layer.open({ type: 0, //信息框，默认 （扩：0：信息框； 1：页面层； 2：iframe层； 3：加载层； 4：tips层） title: “自定义标题”, //标题 content: “传入容易的文本或html”, //内容 skin: ‘layui-layer-lan’, //标题样式 area: [‘500px’, ‘300px’], //弹出层大小 offset: ‘10px’, //弹出层坐标 （扩：默认：’auto’；offset: ‘10p
layui在首页添加弹窗和跳转页面
最新发布
weixin_63954739的博客
06-14 235
在原有的就项目里面，点击登录页面原有的数据执行前先添加接口及判断，首页。跳转的页面添加数据完成时返回上一级。
jQuery Layer 弹层组件
zaixianshouce的博客
10-21 211
layer是一款近年来口碑非常不错的web弹层组件，她具备全方位的解决方案，致力于服务各个水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。 在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer。layer兼容了包括IE6在内的所有主流浏览器。 她数量可观的接口，使...
layui弹出层
qq_44484894的博客
06-18 266
layui弹出层 开发工具与关键技术：VisualStudio 与layui 撰写时间：6月18号 作者： 曾子千 之前我有说过layui这个简单好用的前端插件，它适用于除了i6i7IE浏览器以外的所有的浏览器！（本文内容引用于layui） 本篇写layui里的一个功能：弹出层-layui.layer 1.基础参数 我们提到的基础参数主要指调用方法时用到的配...
SSM框架JSP使用Layui实现layer弹出层效果
10-15
在SSM（Spring、SpringMVC、MyBatis）框架中，使用JSP页面和Layui前端框架来实现layer弹出层效果是常见的做法，这样可以为用户提供更好的交互体验。Layui是一款轻量级的前端组件库，其中的layer模块提供了丰富的弹窗...
在layui中layer弹出层点击事件无效的解决方法
10-16
在使用layui库与layer弹窗插件进行网页开发时，可能会遇到一个问题，即在layer弹出层中的点击事件无法正常工作。这个问题通常是由于事件绑定的方式不正确导致的。本文将详细解析这个问题的原因，并提供解决方案。 ...
使用layui的layer组件做弹出层的例子
10-16
使用layui的layer组件实现弹出层是一种常见的前端开发实践，主要通过引入layui框架以及layer组件来快速搭建页面弹出层效果。layui是一个前端UI框架，以纯CSS+JS的方式提供了一整套简洁的UI元素，而layer组件是layui...
layer弹出层组件 v3.0.3
12-02
《layer弹出层组件 v3.0.3：构建高效Web弹层体验》 在Web开发领域，用户体验的提升往往离不开细腻的交互设计。Layer弹出层组件以其卓越的性能和丰富的功能，成为了众多开发者首选的弹层解决方案。Layer v3.0.3版本...
layui之layer各种弹出层
热门推荐
Cloud-Future的博客
12-05 1万+
一、简单信息提示层 示例： //提示层 layer.msg('玩命提示中'); 默认关闭时间是3秒，效果如下（背景是官网的广告，实际效果是黑色半透明）： 自定义样式以及时间，代码如下： layer.msg('操作成功!', {icon: 6, time: 2000}); icon样式是6，关闭时间为2秒。效果如下： 二、询问框 示例： //询问框 layer.confirm( '您是如何看待前端开发？', //弹出框内容，支持html //下面是配置选项
LayUI弹出层（html）
03-12
LayUI弹出层（html），LayUI弹出层（html），LayUI弹出层（html）
Layui的弹出层
weixin_44543131的博客
06-04 1056
1：先在HTML页面上放一个button按钮，给按钮ID，设置样式，按钮的作用就是弹出layui的open层： <button|type=“button”|id="Open”|style=“width:100px;height:40px;margin:5% 50%;background:#7d19ce; border:none;color:#fff”>弹出层 2：在JS中先引用La...
Layui之弹出层
柚咖小窝
02-14 1万+
1
layer弹出框
chxuy的博客
01-13 596
layer弹出框汇总：[https://blog.youkuaiyun.com/uuihoo/article/details/80596020]
layer 弹出窗
weixin_34364071的博客
12-14 425
2019独角兽企业重金招聘Python工程师标准>>> ...
Layer——弹出层
weixin_44543412的博客
05-16 912
Layer——弹出层 开发工具与关键技术：Visual Studio 前端 作者：盘子 撰写时间：2019年5月16 日 Layui.layer弹层组件文档，layer是layui的代表作，也只是作为layui的一个弹层模块。Layer可以作为独立组件来使用，也可以通过layui模块化使用，至于使用哪一种 可以按照实际的需求选择，不过文档都要以本页为主。 两种使用方法的使用语法以及效果实例如下， ...
web 前端常用组件之Layer弹出层组件
u013733643的博客
07-28 1361
在web项目无论是基本的弹窗还是需要个性化定制的弹出，Layer都能提供很好的支持，这里只做抛砖引玉，需要更多信息请访问官网。Layer具备全方位的解决方案，致力于服务各水平段的开发人员，让页面轻松地拥有丰富友好的操作体验。感谢Layer作者贤心，Layer官网地址http//layer.layui.com/经手几个项目，还是感觉Layer用起来比较的轻松，你能想到的Layer都能帮你做到。Layer尽可能地在以更少的代码展现更强健的功能，注重性能的提升、易用和实用性.。...
Layui 1.0.9 弹出层组件文档架完整安装包介绍
标题中的“layer1.0.9完整包”指代的是一个具体的版本号的layer弹出层组件的压缩包。layer是一个广泛使用的轻量级弹出层组件，通常用于web开发中，以实现各种弹出层效果，如提示框、模态框、信息框等。它的主要作用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值