一、基础知识
Layui弹出层是基于jQuery的一款弹出层组件,主要用于提示信息、弹出窗口、操作菜单等场景。
调用弹出层可以使用layer.open()
方法,同时也可以使用layer.close()
方法关闭弹出层。
LayUI弹出层的最基本语法如下:
layer.open({
type: 1,
content: '这是一个弹出层'
});
二、弹出层类型
Layui弹出层提供了多种类型,可以根据实际需求进行选择。
1. 普通弹出层
普通弹出层可以通过设置type为1实现,同时可以设置title、area、offset等属性。
layer.open({
type: 1,
title: '普通弹出层',
area: ['400px', '300px'],
content: '这是一个普通弹出层',
offset: 'auto'
});
2. iframe层
iframe层可以通过设置type为2实现,同时需要设置content为iframe的地址或者HTML代码。iframe层可以解决弹出层无法显示滚动条的问题。
layer.open({
type: 2,
title: 'layui官方网站',
area: ['800px', '600px'],
content: 'https://www.layui.com/'
});
3. 加载层
加载层可以通过设置type为3实现,同时可以设置icon、shade等属性。
var index = layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
// 关闭加载层
layer.close(index);
4. tips层
tips层可以通过设置type为4实现,需要设置content为提示内容,同时可以设置tips方向和颜色等属性。
layer.tips('这里是tips层', '#btn', {
tips: [1, '#0f0']
});
三、事件监听
Layui弹出层还提供了多种事件监听,可以实现在弹出层打开和关闭时执行特定的事件。
1. 打开弹出层时执行
layer.open({
type: 1,
title: '监听弹出层打开事件',
success: function(layero, index){
console.log('弹出层已经打开!');
}
});
2. 关闭弹出层时执行
layer.open({
type: 1,
title: '监听弹出层关闭事件',
content: '这是一个弹出层',
end: function(){
console.log('弹出层已经关闭!');
}
});
四、实例化对象
通过使用layer.alert()
、layer.confirm()
等方法可以获取到弹出层实例化对象,可以对弹出层进行更加丰富的操作。
1. alert弹出层
通过layer.alert()
方法可以获取到alert弹出层的实例化对象,可以进行更加丰富的操作,例如修改弹出层的提示文字、按钮文字、按钮颜色等属性。
var alertLayer = layer.alert('这是一个alert弹出层', {
icon: 0,
title: 'alert'
}, function(index){
layer.close(index);
console.log('alert弹出层已经关闭!');
});
alertLayer.setContent('这是修改后的alert弹出层');
alertLayer.setTitle('修改后的alert');
alertLayer.setBtn(['自定义按钮一', '自定义按钮二'], function(){
console.log('自定义按钮一被点击!');
}, function(){
console.log('自定义按钮二被点击!');
});
alertLayer.setBtnAlign('c');
alertLayer.setStyle({
backgroundColor: '#f5f5f5'
});
2. confirm弹出层
通过layer.confirm()
方法可以获取到confirm弹出层的实例化对象,可以进行更加丰富的操作,例如修改弹出层的提示文字、按钮文字、按钮颜色等属性。
var confirmLayer = layer.confirm('这是一个confirm弹出层', {
icon: 3,
title: 'confirm'
}, function(index){
layer.close(index);
console.log('confirm弹出层被确认!');
}, function(index){
layer.close(index);
console.log('confirm弹出层被取消!');
});
confirmLayer.setContent('这是修改后的confirm弹出层');
confirmLayer.setTitle('修改后的confirm');
confirmLayer.setBtn(['自定义按钮一', '自定义按钮二'], function(){
console.log('自定义按钮一被点击!');
}, function(){
console.log('自定义按钮二被点击!');
});
confirmLayer.setBtnAlign('c');
confirmLayer.setStyle({
backgroundColor: '#f5f5f5'
});
五、总结
通过上述分析,我们可以看到Layui弹出层提供了多种类型和事件监听的方法,使得弹出层在实际应用中更加灵活和多样化。同时,通过获取弹出层实例化对象可以对弹出层进行更加丰富的操作,使得弹出层更加符合实际需求。