<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>可以拖拽的弹出层</title>
<style type="text/css">
#show{
width:100px;
height:30px;
line-height:30px;
margin:0px auto;
background-color:yellow;
}
#show_dialog{
display:none;
padding:8px;
}
</style>
<script src="jquery-1.5.1.js"></script>
<script>
var move_flag=false;
var dx,dy;
$(document).ready(function(){
$("#show").click(function(event){
var str="可以拖拽的弹出层";
$("#txt").html(str);
var wid = $(window).width();
var hei = $(window).height();
var left = (wid - 300)/2+"px";
var top = (hei - 150)/2+"px";
$("#show_dialog").css({
"z-index":"3",
"position":"absolute",
"display":"block",
"width":"300px",
"height":"150px",
"left":left,
"top":top,
"background":"#ccc",
"color":"green",
"border":"1px solid blue"
})
})
$("#close_div").click(function(event){
$("#show_dialog").slideUp("slow");
})
$("#show_dialog").mousedown(function(e){
move_flag=true;
dx=e.pageX-parseInt($("#show_dialog").css("left"));
dy=e.pageY-parseInt($("#show_dialog").css("top"));
});
$(document).mousemove(function(e){
if(move_flag){
var x=e.pageX-dx;
var y=e.pageY-dy;
$("#show_dialog").css({top:y,left:x});
}
}).mouseup(function(){
move_flag=false;
});
});
</script>
</head>
<body>
<div id="show">点击弹出层</div>
<div id="show_dialog">
<div id="txt" style="height:100px;"></div>
<br/>
<div style="text-align:right;padding-bottom:10px;">
<input id='close_div' type="button" value="关闭此弹出层">
</div>
</div>
</body>
</html>