###
<!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>
###
HTML #模态对话框 （未完成版本）
原文地址：http://www.cnblogs.com/lwsup/p/7449843.html