一、layui弹出层弹出照片
弹出层在前端开发中非常常见，对于图片的展示也是一个很重要的场景。在layui中，我们可以通过弹出层来实现图片的展示。
首先，我们需要引入layui的css和js文件，然后给按钮绑定一个点击事件，点击该按钮时触发弹出层：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui弹出层弹出照片</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
</head>
<body>
<button id="imgBtn">点我弹出层</button>
<script>
layui.use('layer', function(){
var layer = layui.layer;
$('#imgBtn').click(function(){
layer.photos({
photos: {
"title": "自定义标题",
"data": [{
"alt": "图片名",
"src": "图片地址"
}]
}
});
});
});
</script>
</body>
</html>上面的代码中，我们引入了layui的css和js文件，然后在button的点击事件中，使用layer.photos来弹出图片。我们将图片的标题和路径封装成一个对象，然后传给photos的参数即可。
二、layui 弹出层 弹出form
弹出层除了用来展示信息，还可以用来展示表单。Layui中的layer模块提供了弹出层中form的API，我们只需要按照相应的格式来调用相应的函数，就可以实现在弹出层中展示表单的功能。
下面是一个简单的示例，点击按钮弹出弹出层中包含表单，点击提交按钮时，可以在控制台输出表单数据：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui 弹出层 弹出form</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
</head>
<body>
<button id="formBtn">点我弹出层</button>
<script>
layui.use('layer', function(){
var layer = layui.layer;
$('#formBtn').click(function(){
layer.open({
type: 1,
title: '弹出层中包含表单',
area: ['500px', '300px'],
content: '<form class="layui-form"><div class="layui-form-item"><label class="layui-form-label">用户名</label><div class="layui-input-block"><input type="text" name="uname" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">密码</label><div class="layui-input-block"><input type="password" name="pwd" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="formDemo">提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form>',
success: function(layero, index){
layui.use(['form'], function(){
var form = layui.form;
form.on('submit(formDemo)', function(data){
console.log(data.field)
return false;
});
});
}
});
});
});
</script>
</body>
</html>在上面的代码中，我们引入了Layui的css和js文件，并且在按钮的点击事件中，使用layer.open来弹出层中包含表单。在弹出层中包含表单的HTML代码中，我们使用了Layui的表单布局，并在提交表单时使用了form.on的事件监听来获取表单数据。
三、layui弹出层表单
Layui中的表单组件提供了丰富的表单元素和验证功能，我们可以在弹出层中使用Layui的表单组件，以实现更好的用户体验。
下面是一个示例，点击按钮弹出层中包含表单，表单中包含了多个表单元素，并且有必填项以及自定义规则的验证：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui弹出层表单</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
</head>
<body>
<button id="fBtn">点我弹出层</button>
<script>
layui.use(['form', 'layer'], function(){
var form = layui.form;
var layer = layui.layer;
$('#fBtn').click(function(){
layer.open({
type: 1,
title: 'information',
area: ['500px', '300px'],
content: '<form class="layui-form"><div class="layui-form-item"><label class="layui-form-label">username</label><div class="layui-input-block"><input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">password</label><div class="layui-input-block"><input type="password" name="pwd" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">email</label><div class="layui-input-block"><input type="text" name="email" required lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">age</label><div class="layui-input-block"><input type="text" name="age" required lay-verify="number" placeholder="请输入年龄" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="formDemo">Submit</button></div></div></form>',
success: function(layero, index){
form.render();
}
});
});
form.on('submit(formDemo)', function(data){
console.log(data.field)
return false;
});
});
</script>
</body>
</html>在上面的代码中，我们引入了Layui的css和js文件，并给按钮绑定了一个点击事件。在该点击事件中，我们使用layer.open来弹出层中的表单，并使用Layui表单组件提供的验证功能来对表单元素进行验证。在表单验证通过后，可以在控制台输出表单数据。
四、layui弹出层自定义按钮
Layui弹出层不仅可以包含表单，还可以包含自定义按钮。我们可以通过layer.open的btn参数来自定义弹出层中的按钮。在弹出层中包含按钮，可以更加灵活地进行交互。
下面是一个示例，点击按钮弹出层中包含自定义按钮，点击按钮时会在控制台输出按钮的名称：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> layui弹出层自定义按钮</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
</head>
<body>
<button id="btn">点我弹出层</button>
<script>
layui.use(['layer'], function(){
var layer = layui.layer;
$('#btn').click(function(){
layer.open({
type: 0,
title: 'information',
content: '确定进行操作吗？',
btn: ['确定', '取消'],
yes: function(index, layero){
console.log('确定')
layer.close(index);
},
btn2: function(index, layero){
console.log('取消')
layer.close(index)
}
});
});
});
</script>
</body>
</html>在上面的代码中，我们引入了Layui的css和js文件，并在按钮的点击事件中使用layer.open来弹出层。在layer.open的btn参数中，我们可以自定义按钮的名称，并在yes和btn2的回调函数中来进行按钮的逻辑处理。在示例中，我们点击“确定”按钮时在控制台输出“确定”字符串，并关闭弹窗。
五、layui弹出层ajax
在前端开发中，我们经常需要通过ajax来进行异步操作。在Layui的弹出层中，我们同样可以使用ajax来对弹出层中的数据进行异步操作。
下面是一个简单的示例，点击按钮弹出层中异步获取数据：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui弹出层ajax</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
</head>
<body>
<button id="btn" class="layui-btn">Click Me</button>
<script>
layui.use(['layer', 'jquery'], function(){
var layer = layui.layer;
var $ = layui.jquery;
$('#btn').click(function(){
$.ajax({
url: 'https://api.github.com/users/liufei9936',
type: 'GET',
dataType: 'JSON',
success: function(res){
layer.open({
type: 1,
title: 'User Information',
area: '600px',
content: '<div class="user"><img src="' + res.avatar_url + '" alt="" /><p>用户名：' + res.login + '</p><p>名称：' + res.name + '</p><p>公司：' + res.company + '</p><p>位置：' + res.location + '</p></div>'
});
},
error: function(err){
console.log(err)
}
});
})
});
</script>
</body>
</html>在上面的代码中，我们引入了Layui和jQuery的文件，并在按钮的点击事件中，使用jQuery中的$.
