当前博客：32-快码FOF中文编程layui教学-组件：弹出层

503 次浏览【转载需注明来源】

收藏内容 (0) (0)

博客作者：【qiang】

个性签名：请输入个性签名___________

layer弹出层，是layui的代表作，被许多开发者列为弹出层的首选组件，它可以用少量的代码配置实现丰富的弹窗。

弹出层的类型主要有以下几种。

1、普通信息框弹窗

普通信息框弹出层一般用于用户操作提示，比如提示用户操作成功还是失败，代码示例：

lay_弹出层.创建({
	[lay_弹出层.配置.内容]: "传入任意的文本或html",
});

还可以加图标让弹窗更生动。

lay_弹出层.创建({
	[lay_弹出层.配置.内容]: "传入任意的文本或html",
	[lay_弹出层.配置.图标]: lay_弹出层.图标.成功,
});

或者多加几个按钮，代码示例：

lay_弹出层.创建({
	[lay_弹出层.配置.标题]: "多按钮的弹窗",
	[lay_弹出层.配置.内容]: "我是多按钮弹窗的内容......",
	[lay_弹出层.配置.图标]: lay_弹出层.图标.笑脸,
	[lay_弹出层.配置.按钮]: ["好的", "收到", "拒收", "关闭"],
	[lay_弹出层.配置.确认]: 定义函数 () {
		lay_弹出层.消息框("好的");
	},
	按钮2: 定义函数 () {
		lay_弹出层.消息框("收到");
	},
	按钮3: 定义函数 () {
		lay_弹出层.消息框("拒收");
	},
	按钮4: 定义函数 () {
		返回 假; // 不让弹窗关闭
	},
});

代码效果示例：

另外一种更简洁的消息框弹窗，代码示例：

lay_弹出层.消息框("你已完成注册!");

代码效果展示：

2、页面层弹窗

页面层和普通弹窗的不同是，页面层弹窗支持普通文本、html、DOM元素，代码示例：

lay_弹出层.创建({
	[lay_弹出层.配置.类型]: lay_弹出层.类型.页面,
	[lay_弹出层.配置.内容]: "<标题3 行内样式='外边距:20px'>我是页面层，内容支持普通文本、html、DOM</标题3>",
	[lay_弹出层.配置.按钮]: ["收到"],
});

代码效果展示：

3、内联框架弹窗

内联框架的内容项是一个地址，它是一个内联框架的弹窗，代码示例如下：

lay_弹出层.创建({
	[lay_弹出层.配置.类型]: lay_弹出层.类型.内联框架,
	[lay_弹出层.配置.标题]: 假,
	[lay_弹出层.配置.宽高]: ["700px", "400px"],
	[lay_弹出层.配置.遮罩]: 0.7,
	[lay_弹出层.配置.关闭按钮]: 0,
	[lay_弹出层.配置.遮罩关闭]: 真,
	[lay_弹出层.配置.内容]: "https://www.bing.com",
});

代码效果展示：

4、加载层弹窗

加载层用于页面、数据加载，出现的动画，内置了3种动画，分别是0-2，如果是动画0，可以不用传，代码示例如下：

lay_弹出层.加载框(1, {
	[lay_弹出层.配置.时间]: 3000,
});

代码效果展示：

5、提示层弹窗

绑定在元素上的弹窗，可以自己设置弹窗的颜色和方向（参考代码实例），代码示例如下：

lay_弹出层.提示框("Hi，我是提示", "#演示");

代码效果展示：

6、询问层弹窗

询问层弹窗会带有一个确认方法，一般用于删除的时候确认是否误删，代码示例如下：

lay_弹出层.询问框("是否删除当前数据", 定义函数 (序号) {
	lay_弹出层.消息框("已删除!");
	lay_弹出层.关闭(序号);
});

代码效果展示：

7、输入层弹窗

代码示例：

lay_弹出层.输入层(
	{
		[lay_弹出层.配置.标题]: "输入任何口令，并确认",
	},
	定义函数 (输入文本, 序号) {
		lay_弹出层.消息框("输入的文字:" + 输入文本);
		lay_弹出层.关闭(序号);
	}
);

代码效果展示：

点击此处跳转案例下载：点击下载弹出层实例

评论信息

默认排序 

当前博客：32-快码FOF中文编程layui教学-组件：弹出层

测试账号

热门博客

最新博客

32-快码FOF中文编程layui教学-组件：弹出层