您的位置：首页 > Web前端 > JavaScript

js 登录浮层实现(可拖拽)

2014-11-25 22:07 381 查看 
<!DOCTYPE html>

<html>
<head>
<meta charset='utf-8'>
<title>浮层</title>
<style>
body{
margin: 0px;
padding: 0px;
font-size: 12px;
font-family: '微软雅黑';
}
.ui-dialog{
width: 300px;
height: auto;
position: absolute;
z-index: 999;
top: 100px;
left: 100px;
border: 1px solid #d5d5d5;
background: #fff;
display: none;/*隐藏登录浮层*/
}
.ui-dialog-title{
height: 48px;
line-height: 48px;
padding-left: 20px;
color: #535353;
font-size: 16px;
background: #f5f5f5;
border-bottom: 1px solid #efefef;
cursor: move;
}
.ui-dialog-title-closebutton{
width: 48px;
height: 48px;
display: block;
position: absolute;
top: 0px;
right: 0px;
/*background: url();*/
background: red;
}
.ui-dialog-title-closebutton:hover{
/*background: url();*/
background: #fff;
}
.ui-dialog-content{
margin-top: 30px;
}
.ui-dialog-content .title{
display: inline-block;
width: 40px;
font-size: 13px;
text-align: left;
}
.ui-dialog-content .require, #btn_login{
width: 170px;
height: 25px;
margin: 0px;
padding: 0px;
color: #535353;
}
.ui-dialog-content > form > div{
margin-top: 15px;
margin-bottom: 15px;
text-align: center;
}
.ui-mask{
width: 100%;
height: 100%;
background: #000;
opacity: 0.4;
filter: Alpha(opacity=40);
position: absolute;
top: 0px;
left: 0px;
z-index: 888;
display: none;/*隐藏遮盖层*/
}
.link{
text-align: right;
line-height: 20px;
padding-right: 40px;
}
</style>
</head>
<body>
<!-- 登录浮层 -->
<div class='ui-dialog' id='dialog'>
<div class='ui-dialog-title' id='dialogTitle'>
登录通行证
<a href='javascript:hideDialog();' class='ui-dialog-title-closebutton'></a>
</div>
<div class='ui-dialog-content'>
<form action='' method='post'>
<div><label class='title'>帐号:</label><input type='text' class='require' /></div>
<div><label class='title'>密码:</label><input type='password' class='require' /></div>
<div><label class='title'></label><input type='button' value='登 录' id='btn_login' /></div>
</form>
</div>
</div>

<!-- 遮盖层 -->
<div class='ui-mask' id='mask' onselectstart='return false'></div>

<div class='link'><a href='javascript:showDialog();'>登录</a></div>

<script type='text/javascript'>

//  获取元素对象
function g(id){ return document.getElementById(id); }

//  自动居中 - 登录浮层
function autoCenter(el){
var bodyW = document.documentElement.clientWidth;
var bodyH = document.documentElement.clientHeight;//网页可视区域 宽高

var elW = el.offsetWidth;
var elH = el.offsetHeight;//浮层 宽高

el.style.left = (bodyW - elW) / 2 + 'px';
el.style.top = (bodyH - elH) / 2 + 'px';
}

//  自动全屏 - 遮罩
function fillToBody(el){
el.style.width = document.documentElement.clientWidth + 'px';
el.style.height = document.documentElement.clientHeight + 'px';
}

var mouseOffsetX = 0;//偏移( 鼠标在登录层标题栏按下时的 横坐标与登录层左上角的横坐标 的差 )
var mouseOffsetY = 0;//    (                            纵坐标与              纵坐标 的差 )
var isDraging = false;//是否可拖拽

//  鼠标按下   计算偏移(固定)
g('dialogTitle').addEventListener('mousedown', function(e){
var e = e || window.event;
mouseOffsetX = e.pageX - g('dialog').offsetLeft;
mouseOffsetY = e.pageY - g('dialog').offsetTop;
isDraging = true;
})

//  鼠标移动
document.onmousemove = function(e){
var e = e || window.event;
var mouseX = e.pageX;//鼠标当前位置
var mouseY = e.pageY;

var moveX = 0;//浮层元素新位置
var moveY = 0;

if(isDraging === true){
moveX = mouseX - mouseOffsetX;
moveY = mouseY - mouseOffsetY;

var pageWidth = document.documentElement.clientWidth;//网页可视区域 宽高
var pageHeight = document.documentElement.clientHeight;

var dialogWidth = g('dialog').offsetWidth;//浮层 宽高
var dialogHeight = g('dialog').offsetHeight;

var maxX = pageWidth - dialogWidth;//浮层最大偏移量
var maxY = pageHeight- dialogHeight;

moveX = Math.min(Math.max(0, moveX), maxX);
moveY = Math.min(Math.max(0, moveY), maxY);//范围限定

g('dialog').style.left = moveX + 'px';
g('dialog').style.top = moveY + 'px';
}
}

//  鼠标松开
document.onmouseup = function(){
isDraging = false;
}

//  显示登录浮层
function showDialog(){
g('dialog').style.display = 'block';
g('mask').style.display = 'block';
autoCenter(g('dialog'));
fillToBody(g('mask'));
}

//  隐藏登录浮层
function hideDialog(){
g('dialog').style.display = 'none';
g('mask').style.display ='none'
}

// 窗口改变时触发
window.onresize = function(){
autoCenter(g('dialog'));
fillToBody(g('mask'));
}

</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航