自定义组件列表弹框

最新推荐文章于 2024-07-24 17:26:22 发布

一只金牛座的崽

最新推荐文章于 2024-07-24 17:26:22 发布

阅读量354

点赞数 1

文章标签： javascript css3 es6 jquery html

本文链接：https://blog.csdn.net/weixin_43456275/article/details/103637522

版权

一名前端臭弟弟的学习新得！ (´๑•_•๑)
今天分享一个列表删除弹框功能。
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;
}

效果图
在这里插入图片描述

一只金牛座的崽

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自定义组件列表弹框

一名前端臭弟弟的学习新得！ (´๑•_•๑)今天分享一个列表删除弹框功能。html和js <body> <div id="test"> <table border="" cellspacing="" cellpadding=""> <thead> <tr> <th>ID</...
复制链接

扫一扫