###
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: gray;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
}
.c2{
background-color: white;
position: fixed;
top: 50%;
left: 50%;
height: 300px;
width: 626px;
margin-top: -150px;
margin-left: -400px;
}
.c3{
color: #000;
}
.hide{
display: none;
}
</style>
</head>
<body>
<input id="i1" type="button" value="添加">
<table border="1px">
<thead>
<tr>
<th>主机名</th>
<th>IP</th>
<th>端口</th>
<th>配置</th>
</tr>
</thead>
<tbody>
<tr>
<td>localhost</td>
<td>1.1.1.1</td>
<td>8080</td>
<td><input class="c3" type="button" value="编辑"><input type="button" value="删除"></td>
</tr>
<tr>
<td>localhost</td>
<td>1.1.1.2</td>
<td>3306</td>
<td><input class="c3" type="button" value="编辑"><input type="button" value="删除"></td>
</tr>
<tr>
<td>localhost</td>
<td>1.1.1.3</td>
<td>80</td>
<td><input class="c3" type="button" value="编辑"><input type="button" value="删除"></td>
</tr>
</tbody>
<div id="i2" class="c1 hide">123</div>
<div id="i3" class="c2 hide">
<div id="i4">
<input type="text" name="hostname" />
<input type="text" name="ipaddr" />
<input type="text" name="port"/>
</div>
<input type="button" value="取消">
<input type="button" value="确定">
</div>
</table>
<script src="jquery-3.2.1.js"></script>
<script>
$(‘#i1‘).click(function () {
$(‘#i2,#i3‘).removeClass(‘hide‘);
});
$("input[value=‘取消‘]").click(function () {
$(‘#i2,#i3‘).addClass(‘hide‘);
});
$(‘.c3‘).click(function () {
var h = $(‘#i2,#i3‘).removeClass(‘hide‘);
t = $(‘tbody‘).children().children();
})
</script>
</body>
</html>
###
原文：http://www.cnblogs.com/lwsup/p/7449843.html