<!doctype html>
<!--<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。-->
<html>
<head>
<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="引入jquery "></script><!--引入的js src是引入的js样式路径-->
<link rel="stylesheet" href="" /><!--引入的css页面的样式 href是引入的css样式路径-->
<!--当前页面的三要素-->
<title>html模板</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="">
<!--css,js-->
<style type="text/css">
*{margin:0;padding:0}
body{font-family:"微软雅黑";}
/*弹出框*/
#login {width:600px;height:350px;background:#b30;box-shadow:0 0 10px #000;z-index:10;position:absolute;display:none;}
#login #title{background:#FF8502;width:100%;height:50px;font-size:18px;line-height:50px;text-align:left;text-indent:2em;cursor:move;}
#login #title a{text-decoration:none;display:block;float:right;
margin-right:16px;}
#login #title a:hover{color:#F08}
#content{width:305px;height:175px;margin:50px auto;font-size:16px;}
p{text-indent:0em;}
#content p input{height:35px;width:260px;margin-left:6px;border-radius:4px;text-indent:0em;}
#content .con input{width:10px;height:10px;margin-left: 40px;}
#content .con a{text-decoration:none;display:block;float:right;
margin-right:16px;color:#fff;}
#content .wfsubmit input{margin-left:40px;border:1px solid #46A91C ;background:#46A91C;color:#fff;}
/*遮罩*/
#bg{background:#444;width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;opacity:0.6;display:none;}
</style>
</head>
<body>
<div id="login">
<div id="title">用户登录 <a href="#" class="tcclose">✘</a></div>
<form action="" method="post">
<div id="content">
<p>账号<input type="text"/></p>
<br>
<p>密码<input type="text"/></p>
<br>
<p class="con"><input type="checkbox">下次自动登录 <a href="#">忘记密码</a></p>
<br>
<p class="wfsubmit"><input type="button" value="立即登录"/></p>
</div>
</div>
<div id="bg"></div>
<input type="button" onclick="wf_tcdelog()" value="弹窗"/>
<script type="text/javascript">
function wf_tcdelog(){
$("#login").show();
$("#bg").show();
var _left =($(window).width()-$("#login").width())/2;//获取左边距离
var _top =($(window).height()-$("#login").height())/2-50;//获取左边距离
$("#login").css({left:_left,top:_top});
}
//当浏览器进行改变的时候触发的事件
$(window).resize(function(){
wf_tcdelog();
});
//关闭窗口
$(".tcclose").click(function(){
$("#login").hide();
$("#bg").hide();
});
//拖拽方法。
window.onload=function(){
init(document.getElementById("title"));
}
var l = 0,t=0,x=0,y=0;
var isOver = false;
var zindex = 999;
function init(titleDom){
//tm_center(divObj);//居中事件
/*第一种*/
var thisDom = titleDom;//获取当前title对象
var parentDom = thisDom.parentNode;//获取当前title对应的div
titleDom.onmousedown = function(event){//1111开始
var e = event || window.event;//为了兼容ie和火狐
x = e.clientX;//鼠标所在的x坐标
y = e.clientY;//鼠标所在的y坐标
l = parseInt(parentDom.style.left);//距离浏览器左边的位置left
t = parseInt(parentDom.style.top);//距离浏览器顶部的位置top
isOver = true;//定义拖动标识,防止卡顿
zindex++;
parentDom.style.zIndex = zindex;
document.onmousemove = function(event){
if(isOver){
var e = event || window.event;//为了兼容ie和火狐
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(event){
if(isOver){
isOver = false;//还原标识
}
};//鼠标松开的事件
};///结束
};
</script>
</body>
</html>
注意：使用的时候导入jquery
