jQuery实现简单的模态框<!-- jquery模态框 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*隐藏*/
.hide{
jquery弹出div窗口display:none;
}
/
*弹出的模态框的样式*/
.modal{
position:fixed;
left:50%;
top:50%;
width:500px;
height:400px;
margin-left:-200px;
margin-top:-250px;
z-index:10;
background-color:white;
}
/*阴影区域的样式*/
.shade{
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
opacity:0.6;
background-color:black;
z-index:9;
}
p{
text-align:center;
}
</style>
</head>
<body>
<input type="button" value="添加">
<!-- 弹出的模态框的内容，默认隐藏模态框区域 -->
<div class="modal hide">
<p>地址：<input type="text"></p>
<p>端⼝：<input type="text"></p>
<p><input type="button" value="取消"></p>
</div>
<!-- 弹出模态框时，伴随的阴影部分区域，默认隐藏阴影区域 -->
<div class="shade hide"></div>
<div class="container">
<table border="1">
<tr>
<td>1.1.1.1</td>
<td>80</td>
<td><input type="button" value="编辑"> | <input type="button" value="删除"></td>
</tr>
<tr>
<td>1.1.1.2</td>
<td>81</td>
<td><input type="button" value="编辑"> | <input type="button" value="删除"></td>
</tr>
<tr>
<td>1.1.1.3</td>
<td>82</td>
<td><input type="button" value="编辑"> | <input type="button" value="删除"></td>
</tr>
<tr>
<td>1.1.1.4</td>
<td>83</td>
<td><input type="button" value="编辑"> | <input type="button" value="删除"></td>
</tr>
</table>
</div>
<script src="cdn.bootcdn/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
//添加按钮事件
$('input[value="添加"]').click(function(){
/
/将.modal和.shade展⽰出来
$('.hide').removeClass('hide');
});
//取消按钮事件
$('input[value="取消"]').click(function(){
$('input[type="text"]').val('');
//将.modal和.shade隐藏起来
$('.modal,.shade').addClass('hide');
});
//编辑按钮事件
$('input[value="编辑"]').click(function(){
$('.hide').removeClass('hide');
var tds = $(this).parent().prevAll();
//jquery对象加上索引是dom对象
$($('.modal input')[0]).val($(tds[1]).text());
$($('.modal input')[1]).val($(tds[0]).text());
});
//删除按钮事件
$('input[value="删除"]').click(function(){
//删除对应的<tr></tr>标签
$(this).parent().parent().remove();
});
</script>
</body>
</html>
$('input[type="text"]')  ————》》》选择type="text"的input标签。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。