一名前端臭弟弟的学习新得! (´๑•_•๑)
今天分享一个列表删除弹框功能 。
html和js
<body>
<div id="test">
<table border="" cellspacing="" cellpadding="">
<thead>
<tr>
<th>ID</th>
<th>水果</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
</div>
<div id="layer">
<div class="content">
</div>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/common.js"></script>
<script src="layui/layui.js"></script>
<script type="text/javascript">
$("#layer").hide();
var data = [
{ id: 1, name: "apple", price: 18 },
{ id: 2, name: "banana", price: 19 }
];
var html = "";
for (var i = 0; i < data.length; i++) {
html += `
<tr>
<td>${data[i].id}</td>
<td>${data[i].name}</td>
<td>${data[i].price}元</td>
<td>
<button class="delbtn"οnclick='del(${JSON.stringify(data[i])})'>删除</button>
</td>
</tr>
`;
}
$("#tb").append(html);
function del(ind) {
$("#layer").show();
$("#layer").find(".content").empty();
var html = `
<div id="" class="contitle">
操作确认
<div id="" οnclick="cancel()" class="x">X</div>
</div>
<div class="infolist">
<input type="text" value="${ind.name}" readonly="readonly">
</div>
<div class="conbtn">
<button class="layerbtn"οnclick="layerdel(${ind.id})">确定</button>
<button class="layerbtn layerbtn2" οnclick="cancel()">取消</button>
</div>
`;
$("#layer").find(".content").append(html);
}
function layerdel(ind) {
alert("删除了id为" + ind + "的水果");
$("#layer").hide();
}
function cancel() {
$("#layer").hide();
}
</script>
</body>
css部分
<style type="text/css">
#test {
display: flex;
justify-content: center;
margin-top: 10%;
}
table td,
table th {
border: 1px solid #cad9ea;
color: #666;
height: 30px;
text-align: center;
}
table thead th {
background-color: #4a99f7;
width: 100px;
}
table tr:nth-child(odd) {
background: #fff;
}
table tr:nth-child(even) {
background: rgba(240, 243, 246, 1);
}
table tr:hover {
background-color: rgba(240, 243, 246, 1);
}
.delbtn {
width: 50px;
height: 22px;
background-color: rgba(215, 57, 37, 1);
border: 1px solid rgba(215, 57, 37, 1);
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
cursor: pointer;
}
#layer {
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
position: fixed;
z-index: 4;
top: 0px;
left: 0px;
}
.content {
width: 290px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 200px;
border-radius: 6px;
}
.infolist {
margin: auto;
height: 122px;
position: relative;
}
.content input {
width: 65%;
height: 27px;
border: 1px solid rgba(210, 214, 222, 1);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding-left: 14px;
}
.contitle {
display: flex;
justify-content: space-between;
height: 28px;
border-bottom: 1px solid rgba(210, 214, 222, 1);
padding: 10px 10px 0px 10px;
}
.conbtn {
display: flex;
justify-content: flex-end;
padding-right: 12px;
}
.layerbtn {
width: 50px;
height: 22px;
background-color: #0081ff;
border: 1px solid rgba(210, 214, 222, 1);
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
cursor: pointer;
margin-right: 3px;
}
.layerbtn2 {
background-color: #dddddd;
color: #444444;
}
.x {
cursor: pointer;
}
效果图