html代码:
这个时基本的代码框架,可以根据你的需求进行添加内容
<div class="nav">
<a href="javascript:;" id="register">注册信息</a>
</div>
<div class="d-box" id="d_box">
<div class="hd" id="drop">注册信息 (可以拖拽)
<span id="box_close" onClick="closeWin()">关闭</span>
</div>
<div class="bd"></div>
</div>
css代码:
cursor: pointer;是设置鼠标的形状为手的形状
* {
margin: 0;
padding: 0;
}
.nav {
height: 30px;
background: #036663;
border-bottom: 1px solid #369;
line-height: 30px;
padding-left: 30px;
}
.nav a {
color: #fff;
text-align: center;
font-size: 14px;
text-decoration: none;
}
.d-box {
width: 400px;
height: 300px;
border: 5px solid #eee;
box-shadow: 2px 2px 2px 2px #666;
position: absolute;
top: 40%;
left: 40%;
}
.hd {
width: 100%;
height: 25px;
background-color: #7c9299;
border-bottom: 1px solid #369;
line-height: 25px;
color: white;
cursor: move;
}
#box_close {
float: right;
cursor: pointer;
display: block;
}
JavaScript代码:
closeWin()这个函数是对一些浏览器的判断兼容性
<script>
//找人
var box_close = document.getElementById("box_close");
var d_box = document.getElementById("d_box");//盒子
var drop = document.getElementById("drop");//拖动条
//当点击关闭时,整个注册框消失(各种浏览器的兼容问题)
function closeWin(){
if (navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Chrome") !=-1) {
window.location.href="http://localhost/fastflow/winform/cn/myprocessform.aspx";
window.close();
}
else {
window.opener = null;
window.open("", "_self");
window.close();
}
}
//需求:鼠标在拖动条上按下 可以拖拽 鼠标移动的时候 让d_box跟着鼠标移动
drop.onmousedown = function (event) {
var event = event || window.event;
//获取鼠标在页面中的位置
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
//获取鼠标在按下的那一瞬间在盒子中的位置
var boxX = pageX - d_box.offsetLeft;
var boxY = pageY - d_box.offsetTop;
//鼠标在页面上移动 让d_box跟着鼠标移动
document.onmousemove = function (event) {
var event = event || window.event;
//获取鼠标在页面上的位置
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
//让d_box跟着鼠标移动
d_box.style.left = pageX - boxX + "px";
d_box.style.top = pageY - boxY + "px";
//清除选中文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
};
};
//鼠标弹起 盒子就不应该跟着了
document.onmouseup = function () {
document.onmousemove = null;
};
</script>
该代码段可能不支持一些浏览器,本人目前掌握的支持有限,希望有大佬提点意见,请在下面留言,我会进行改进,谢谢你们的支持!!!