js之模态对话框
程序员文章站
2022-06-21 22:01:28
目标效果：点击页面按钮，显示模态对话框，在模态对话框里点击取消关闭模式对话框。 效果如下 实现代码如下： ......
目标效果：点击页面按钮，显示模态对话框，在模态对话框里点击取消关闭模式对话框。
效果如下
实现代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>
<input type="button" value="点击" onclick="show()">
</td>
</tr>
</table>
<div id="two" class="c2 hide"></div>
<div id="three" class="c3 hide">
用户名<input type="text">
<br>
密码<input type="password">
<br>
<input type="button" value="取消" onclick="hide()">
</div>
<style>
.hide{
display: none;
}
.c3{
height: 100px;
width: 300px;
background-color: white;
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
z-index: 3;
}
.c2{
background-color: rgba(0,0,0,0.3);
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 2;
}
</style>
<script type="text/javascript">
function show() {
document.getelementbyid('two').classlist.remove('hide');
document.getelementbyid('three').classlist.remove('hide');
}
function hide() {
document.getelementbyid('two').classlist.add('hide');
document.getelementbyid('three').classlist.add('hide');
}
</script>
</body>
</html>
上一篇： 五大浏览器内核介绍
下一篇： Vue创建头部组件示例