<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content="text/html;charset=utf-8">
<title>js1</title>
<style>
.shade{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background-color:#333;
opacity:0.6;
}
.delete{
position:fixed;
top:50%;
left:50%;
width:400px;
height:300px;
background-color:white;
margin-left:-200px;
margin-top:-150px;
}
</style>
</head>
<body>
<table>
<tr>
<th>IP</th>
<th>编辑</th>
</tr>
<tr>
<td>192.168.1.111</td>
<td>删除</td>
</tr>
<tr>
<td>192.168.1.112</td>
<td>删除</td>
</tr>
<tr>
<td>192.168.1.113</td>
<td>删除</td>
</tr>
<tr>
<td>192.168.1.114</td>
<td>删除</td>
</tr>
</table>
<!--遮罩层开始 -->
<div class='shade'>
</div>
<!--遮罩层结束 -->
<!--删除层开始 -->
<div class='delete'>
<div>提示</div>
<div>确定要删除吗?</div>
<div>
<input type='button' value='取消'/>
<input type='button' value='确定'/>
</div>
</div>
<!--删除层结束 -->
</body>
</html>
模态对话框 源码分享
最新推荐文章于 2023-02-24 01:36:26 发布