您的位置：首页 > 运维架构 > 网站架构

名企动态网站开发--js实现可拖动弹窗

2016-04-10 16:37 471 查看

html文件

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/index.js"></script>
<script src="js/move.js"></script>
</head>

<body>
<span class="show">
登录
</span>
<div id="gray">

</div>
<div id="win">
<div class="title" id="title">
用户登录
<a href="#">X</a>
</div>
<p class="top"><img src="img/new.png" width="40" height="40" align="absmiddle" /> 号外！我的DIY主题管理功能上线了！即刻起，登录360手机美化，可以将您制作的DIY主题保存到360美化云端，还可以使用我的DIY主题管理等高级功能！
</p>
<div id="lg">
<form>
<p>账号
<input type="text" />
</p>
<p>密码
<input type="password" />
</p>

</form>
<p>
<input type="checkbox" />下次自动登录<a href="#">忘记密码</a></p>
<img src="img/but_bg1.jpg" />
</div>

</div>
</body>

</html>

css文件

*{
margin: 0;
padding: 0;
}
#gray{
width: 100%;
height: 100%;
background: gainsboro;
position: absolute;
top: 0;
opacity: 0.5;
display: none;
}
#win{
width: 600px;
height: 350px;
background: white;
position: absolute;
left: 400px;
top: 150px;
display: none;
}
#win .title{
width: 570px;
height: 45px;
color: white;
background:#ff9933;
font-family: "微软雅黑";
line-height: 45px;
padding-left: 30px;
font-size: 18px;

}
#win .title a{
color: white;
text-decoration: none;
float: right;
margin-right: 5px;
font-family: "微软雅黑";
font-weight: 100;
}
#win p.top{

font-size: 14px;
font-family: "微软雅黑";
color: #666;
margin: 20px;
line-height: 100%;

}
#win #lg{
width:315px;
height: 190px;
margin: 15px auto 0;

}
#lg form p{
font-size: 16px;
font-family: "微软雅黑";
margin-top: 5px;
margin-bottom: 15px;
margin-left: 5px;
}

#lg  form input{
width: 260px;
height: 35px;
border: 1px solid #ddd;
border-radius: 3px;
}
#lg p{
margin-left: 43px;
font-size: 14px;
font-family: "微软雅黑";
}
#lg p a{
float: right;
margin-right: 10px;
}
#lg img{
margin-left: 43px;
margin-top: 5px;
}

js文件一（jQuery）

$(document).ready(function(){
//登录按钮点击事件
$('.show').click(function(){
//灰色界面出现
$('#gray').show();
//弹窗出现
$('#win').show();
//调用location函数，进行初始定位
location();
})
/*
* "x"关闭标志点击事件
* 灰色界面隐藏
* 弹窗隐藏
*/
$('#win .title a').click(function(){
$('#gray').hide();
$('#win').hide();
})
/*
* resize()函数，浏览器界面大小改变时调用
* location函数保证窗口一直在浏览器界面中间
*/
$(window).resize(function(){
location();
})
/*
* 获取到窗口在浏览器中间位置时距离浏览器界面左边框的长度和上边界的长度来对窗口进行定位
*/
function location(){
var t=($(window).height()-$('#win').height())/2;
var w=($(window).width()-$('#win').width())/2;
$('#win').css({
top:t,
left:w
})
}
})

js文件二--实现窗口可拖动

window.onload = function() {
init(document.getElementById('title'));
}
var l = 0,
t = 0,
x = 0,
y = 0;
var isOver = false;

function init(titleDom) {
var thisDom = titleDom;
var parentDom = thisDom.parentNode;
thisDom.onmousedown = function(event) {
var e = event || window.event;
x = e.clientX;//鼠标箭头的横坐标
y = e.clientY;//鼠标箭头的纵坐标

l = parseInt(parentDom.offsetLeft);//窗口距浏览器左边界的距离
t = parseInt(parentDom.offsetTop);//窗口距浏览器上边界的距离
isOver = true;//防止出现拖动bug
document.onmousemove = function(event) {
if (isOver) {
var e = event || window.event;//兼容不同浏览器
var newLeft = l + e.clientX - x;//获得鼠标拖动后的左边距
var newTop = t + e.clientY - y;//获得鼠标拖动后的上边距
parentDom.style.left = newLeft + 'px';//设置鼠标拖动后的左边距
parentDom.style.top = newTop + 'px';//设置鼠标拖动后的上边距
}
}
document.onmouseup = function() {
isOver = false;
}
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js JavaScript jQuery 可拖动弹窗弹窗

相关文章推荐

新的分享

章节导航