表单添加弹出层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>后台管理</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<link rel="stylesheet" href="./css/css.css">
</head>
<body>
<div class="header">
<span>管理员列表</span>
<button type="button" class="layui-btn layui-btn-sm" onclick="add()">添加</button>
</div>
<table class="layui-table">
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>性别</th>
<th>城市</th>
<th>签名</th>
<th>积分</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>孟子</td>
<td>华夏族（汉族）</td>
<td>公元前-372年</td>
<td>猿强</td>
<td>汉族</td>
<td>1989-10-14</td>
<td>
<button type="button" class="layui-btn" onclick="add()">编辑</button>
<button type="button" class="layui-btn scan" onclick="del()">删除</button>
</td>
</tr>
<tr>
<td>孟子</td>
<td>华夏族（汉族）</td>
<td>公元前-372年</td>
<td>猿强</td>
<td>汉族</td>
<td>1989-10-14</td>
<td>
<button type="button" class="layui-btn" onclick="add()">编辑</button>
<button type="button" class="layui-btn scan" onclick="del()">删除</button>
</td>
</tr>
<tr>
<td>孟子</td>
<td>华夏族（汉族）</td>
<td>公元前-372年</td>
<td>猿强</td>
<td>汉族</td>
<td>1989-10-14</td>
<td>
<button type="button" class="layui-btn" onclick="add()">编辑</button>
<button type="button" class="layui-btn scan" onclick="del()">删除</button>
</td>
</tr>
<tr>
<td>孟子</td>
<td>华夏族（汉族）</td>
<td>公元前-372年</td>
<td>猿强</td>
<td>汉族</td>
<td>1989-10-14</td>
<td>
<button type="button" class="layui-btn" onclick="add()">编辑</button>
<button type="button" class="layui-btn scan" onclick="del()">删除</button>
</td>
</tr>
<tr>
<td>孟子</td>
<td>华夏族（汉族）</td>
<td>公元前-372年</td>
<td>猿强</td>
<td>汉族</td>
<td>1989-10-14</td>
<td>
<button type="button" class="layui-btn" onclick="add()">编辑</button>
<button type="button" class="layui-btn scan" onclick="del()">删除</button>
</td>
</tr>
</tbody>
</table>
</body>
<script src="./layui/layui.js"></script>
<script>
layui.use(['layer'], function () {
layer = layui.layer;
$ = layui.jquery;
});
// 删除
function del() {
layer.confirm('确定要删除么？', {
icon: 2,
btn: ['确定', '取消'] //可以无限个按钮
}, function (index, layero) {
//按钮【按钮一】的回调
}, function (index) {
//按钮【按钮二】的回调
});
}
// 添加/编辑
function add() {
layer.open({
type: 2,
title: '添加管理员',
area: ['480px', '420px'],
content: 'add.html' //这里content是一个普通的String
});
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>添加</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<link rel="stylesheet" href="./css/css.css">
</head>
<body>
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">ID</label>
<div class="layui-input-inline">
<input type="text" name="text" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="text" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<input type="text" name="text" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">城市</label>
<div class="layui-input-inline">
<input type="text" name="text" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">签名</label>
<div class="layui-input-inline">
<input type="text" name="text" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">积分</label>
<div class="layui-input-inline">
<input type="text" name="text" class="layui-input">
</div>
</div>
<button class="layui-btn layui-btn-warm baocun">保存</button>
</form>
</body>
<script src="./layui/layui.js"></script>
</html>
