<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
<style>
#clickPop{
width: 100%;
text-align: center;
font-size: 16px;
cursor: pointer;
}
#login{
width: 520px;
height: auto;
padding: 0 10px;
margin: 100px 700px;
box-shadow: 0 0 20px;
border-radius: 5px;
text-align: center;
position: absolute;
display: none;
z-index: 999;
background-color: #ffffff;
border: 1px solid #eeeeee;
}
.top{
text-align: center;
width: 100%;
height: 70px;
line-height: 70px;
cursor: move;
position: relative;
}
.center input{
width: 300px;
height: 30px;
margin-top: 20px;
border-radius: 5px;
padding-left: 5px;
}
#login .button{
width: 100px;
background-color: #ffffff;
margin-bottom: 10px;
}
#close{
width: 40px;
height: 40px;
position: absolute;
right: -15px;
top: -15px;
border-radius: 50%;
background-color: red;
text-align: center;
line-height: 40px;
display: inline-block;
}
#close a{
color: #000000;
font-size: 18px;
}
.bg{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
display: none;
}
</style>
</head>
<body>
<div id="clickPop">点击弹出</div>
<!--登录框-->
<div id="login">
<div class="top" id="top">
<h1>登录对话框</h1>
<span id="close"><a href="javascript:void(0);">X</a></span>
</div>
<div class="center">
<label>用户名</label>
<input type="text" placeholder="请输入用户名"/><br/>
<label>密码</label>
<input type="text" placeholder="请输入密码" style="margin-left: 12px"/><br/>
<input type="button" value="登录" class="button"/>
</div>
<!--关闭按钮-->
</div>
<!--背景层-->
<div class="bg" id="bg"></div>
<script>
function queryId(id) {
return document.getElementById(id);
}
//给外层添加一个弹出事件
queryId("clickPop").onclick = function (ev) {
//显示出登录对话框
queryId("login").style.display = "block";
//弹出背景层
queryId("bg").style.display = "block";
//因为弹出按钮属于document,所以会发生事件冒泡,所以要阻止事件冒泡,
window.event?window.event.cancelBubble = true:ev.stopPropagation();
};
//给close添加点击事件,点击隐藏登录和背景层
queryId("close").onclick = function () {
//显示出登录对话框
queryId("login").style.display = "none";
//弹出背景层
queryId("bg").style.display = "none";
};
//如果弹出登录对话框的时候点击除了登录框以外的的地方也关闭背景和登录对话框用document
//因为登录对话框属于document,所以会发生事件冒泡,所以要阻止事件冒泡,
//事件处理对象ev chrome和火狐支持,window.event ie支持
//document.documentElement html
//document.documentElement document
queryId("login").onclick = function (ev) {
window.event?window.event.cancelBubble = true:ev.stopPropagation();
};
document.documentElement.onclick = function () {
queryId("login").style.display = "none";
//弹出背景层
queryId("bg").style.display = "none";
};
//鼠标按下事件移动整个登录对话框
queryId("top").onmousedown = function (ev) {
//求出此时鼠标点击区域距离登录对话框边框直接的距离
var clickX = window.event.clientX?window.event.clientX-queryId("login").offsetLeft:ev.clientX-queryId("login").offsetLeft;
// var clickX = ev.clientX||window.event.clientX-queryId("login").offsetLeft;
var clickY = window.event.clientY?window.event.clientY-queryId("login").offsetTop:ev.clientY-queryId("login").offsetTop;
// var clickY = ev.clientY||window.event.clientY-queryId("login").offsetTop;
//给document注册移动事件
document.onmousemove = function (ev2) {
//求出此时登录对话框距离浏览器左边和上边的的距离
//减100 700是因为margin的关系,让距离始终在拖动区域左上方
// queryId("login").style.left = ev2.clientX||window.event.clientX-clickX-700+"px";
// queryId("login").style.top = ev2.clientY||window.event.clientY-clickY-100+"px";
queryId("login").style.left = window.event.clientX?window.event.clientX-clickX-700+"px":ev2.clientX-clickX-700+"px";
queryId("login").style.top = window.event.clientY?window.event.clientY-clickY-100+"px":ev2.clickY-clickY-100+"px";
};
};
//给document注册鼠标抬起事件,清除移动事件
document.onmouseup = function () {
document.onmousemove = null;
}
</script>
</body>
</html>
实现效果