效果图：
HTML文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可拖拽登录框</title>
<style type="text/css">
*{margin:0;padding:0}
.deselect_text{-moz-user-select:none;-webkit-user-select:none;-ms-user-select: none;-khtml-user-select: none;user-select:none;}
.input_field{width:280px;height:30px;border:1px solid gray;font-size:18px;line-height:30px}
.input_label{width:280px;height:30px;font-size:14px;font-weight:bold;padding: 5px 0 5px 0;color:gray;line-height:40px}
.input_btn{width:100px; height:30px;font-size:18px;font-weight:bold;line-height:30px;background:gray;color:white;border:0;text-decoration:none;display:inline-block;outline:none}
.input_btn:hover{background:#FB8D44}
.entry{text-align:center; padding: 5px}
</style>
<script type="text/javascript">
var dialog = {
init: function() {
//对话框宽度
var width = 300;
//对话框高度
var height = 300;
//对话框FRAME
var wrapper = document.createElement('div');
//对话框标题栏
var title = document.createElement('div');
//对话框内容部分
var content = document.createElement('div');
//关闭按钮
var close_btn = document.createElement('a');
//BODY宽度
var docWidth = document.documentElement.clientWidth;
//BODY高度
var docHeight = document.documentElement.clientHeight;
//初始化坐标
var point = {x: 0, y: 0};
//是否可以拖动
var draggable = false;
//对话标题文本
var titleText = document.createElement('span');
//设置对话框大小
wrapper.style.width = width + 'px';
wrapper.style.height = 'auto'
wrapper.style.position = 'absolute';
//计算中心位置
wrapper.style.top = Math.floor(((docHeight - height)/2)) + 'px';
wrapper.style.left = Math.floor(((docWidth - width)/2)) + 'px';
wrapper.style.zIndex = '99999';
wrapper.style.border = '1px solid gray';
wrapper.style.background = 'white';
content.style.padding = '5px';
//添加文本选择事件
document.body.onselectstart = document.body.ondrag = function(){
return (!draggable);
}
//设置关闭按钮属性
close_btn.style.border = '0';
close_btn.innerHTML = 'X';
close_btn.href = '#';
close_btn.style.textDecoration = 'none';
close_btn.title = 'Close';
close_btn.style.display = 'inline-block';
close_btn.style.height = '20px';
close_btn.style.width = '20px';
close_btn.style.lineHeight = '20px';
close_btn.style.textAlign = 'center';
close_btn.style.background = 'gray';
close_btn.style.color = 'white';
close_btn.style.cssFloat = 'right';
close_btn.style.styleFloat = 'right';
close_btn.onclick = function() {
wrapper.style.display = 'none';
}
close_btn.onmouseover = function() {
this.style.background = '#FB8D44';
}
close_btn.onmouseout = function() {
this.style.background = 'gray';
}
//设置标题文本属性
titleText.innerHTML = '用户登录';
titleText.style.cssFloat = 'left';
titleText.style.styleFloat = 'left';
titleText.style.fontSize = '18px';
titleText.style.fontWeight = 'bold';
titleText.onmouseover = function() {
this.style.cursor = 'default';
}
//设置标题属性及拖动事件
title.style.height = '20px';
title.style.borderBottom = '1px dashed gray';
title.style.padding = '5px';
title.style.cursor = 'default';
title.onmousedown = function(evt) {
var e = evt || window.event;
//保存鼠标按下坐标
point.x = e.clientX;
point.y = e.clientY;
//禁止文本选择
document.body.className = 'deselect_text';
//设置为可拖动
draggable = true;
}
title.onmousemove = function(evt) {
if(draggable) {
var e = evt || window.event;
//获取事件源
var target = e.target || e.srcElement;
//获取事件源父级
var parent = target.parentNode;
//获取父级坐标
var top = parent.style.top;
var left = parent.style.left;
var x = parseInt(left.substr(0, left.indexOf('px')));
var y = parseInt(top.substr(0, top.indexOf('px')));
//设置父级新坐标
parent.style.left = (e.clientX - point.x + x) + 'px';
parent.style.top = (e.clientY - point.y + y) + 'px';
//保存当前坐标
point.x = e.clientX;
point.y = e.clientY;
}
return true;
}
title.onmouseup = function(evt) {
document.body.className = '';
draggable = false;
}
title.onmouseout = function(evt) {
draggable = false;
}
//将标题文本对象添加到标题框
title.appendChild(titleText);
//将标题按钮对象添加到标题框
title.appendChild(close_btn);
var s = '<div class="input_label">用户名：</div>';
s += '<div><input class="input_field" type="text" id="email" name="email"></div>';
s += '<div class="input_label">密 码：</div>';
s += '<div><input class="input_field" type="password" id="passwd" name="passwd"></div>';
s += '<div class="entry"><a class="input_btn" href="#" id="login_btn" name="login_btn"> 登 录 </a></div>';
content.innerHTML = s;
//添加标题栏
wrapper.appendChild(title);
//添加内容部分
wrapper.appendChild(content);
//将对话框添加到文档中
document.body.appendChild(wrapper);
}
}
window.onload = function(){
dialog.init();
};
</script>
</head>
<body>
testesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestest
<br>
testesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestest
<br>
testesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestest
<br>
testesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestest
<br>
testesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestest
<br>
testesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestest
<br>
testesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestest
<br>
testesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestest
<br>
testesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestest
<br>
testesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestest
<br>
testesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestest
<br>
testesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestest
<br>
testesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestest
<br>
testesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestest
<br>
testesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestesttestest
<br>
</body>
</html>
363
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
