模态弹窗
模态弹窗主要是用于登录或者一些需要在本页面实现弹窗的效果。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
#over {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(145,152, 159, 0.5);
}
#over>div {
width: 300px;
height: 200px;
margin: 0 auto;
margin-top: 200px;
text-align: center;
padding: 1px;
background-color: white;
border-radius: 10px;
}
#content {
position: relative;
}
#close {
position: absolute;
top: -10px;
right: -10px;
width: 20px;
height: 20px;
cursor: pointer;
}
#over>div>h3 {
margin-top: 20px;
}
</style>
<script type="text/javascript">
window.onload = function () {
// 获取点击弹出模态窗口的按钮
var btn = document.querySelector('#btn');
// 给按钮绑定让模态窗口显示的函数
btn.onclick = showOrHidden;
// 获取页面中关闭模态的标签
var a = document.querySelector('#close');
a.onclick = showOrHidden;
// 获取over标签
var over = document.querySelector('#over');
over.onclick = showOrHidden;
// 获取到content标签
var content = document.querySelector('#content');
// 添加点击事件函数，在函数中清除冒泡机制
content.onclick = function (ev) {
var e = event || ev;
e.stopPropagation();
}
//定义让模态窗口显示或隐藏的函数
function showOrHidden() {
// 获取到模态窗口
var over = document.querySelector('#over');
over.style.display = over.style.display == 'none' ? 'block' : 'none';
}
}
</script>
</head>
<body>
<!--模态窗口部分-->
<div id="over" style="display:none">
<!--用户可操作的页面-->
<div id="content">
<h3>登录</h3>
<input type="text" name="username" placeholder="用户名" value="">
<br>
<input type="text" name="pass" placeholder="密码" value="">
<br>
<button type="button" name="button">登录</button>
</div>
</div>
<!--正常页面中的按钮，通过点击按钮触发模态窗口-->
<button type="button" id='btn' name="button">点击弹出模态窗口</button>
</body>
</html>
网友评论