css:
.window {
width:300px;
height:250px;
border:#F90 solid 1px;
font-size:12px;
overflow:hidden;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-border-radius:3px;
position:absolute;
-webkit-box-shadow:1px 1px 5px 2px rgba(135,139,144,0.4);
-moz-box-shadow:1px 1px 5px 2px rgba(135,139,144,0.4);
box-shadow:1px 1px 5px 2px rgba(135,139,144,0.4);
display:none;
}
.title {
height:23px;
text-align:center;
background:#f90;
color:#FFFFFF;
vertical-align:middle;
font-size:16px;
font-weight:bold;
padding:6px;
text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
background:-webkit-gradient(linear, left top, left bottom, from(#e90), to(#FFE0C1));
background:-moz-linear-gradient(top, #e90, #FFE0C1);
background:-0-linear-gradient(top, #e90, #FFE0C1);
background:linear-gradient(top, #e90, #FFE0C1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF8000', endColorstr='#FFE0C1'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF8000', endColorstr='#FFE0C1')"; /* IE8 */
}
.title .info{
float:left;
text-align:center;
width:265px;
}
.title img {
float:right;
}
ul {
list-style-type:none;
}
li {
list-style-type:none;
line-height:18px;
}
.sure {
width:50px;
height:15px;
background-color:#e90;
float:right;
margin-right:20px;
text-align:center;
padding:5px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
color:#FFFFFF;
background:-webkit-gradient(linear, left top, left bottom, from(#e90), to(#FFE0C1));
background:-moz-linear-gradient(top, #e90, #FFE0C1);
background:-0-linear-gradient(top, #e90, #FFE0C1);
background:linear-gradient(top, #e90, #FFE0C1);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF8000', endColorstr='#FFE0C1'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF8000', endColorstr='#FFE0C1')"; /* IE8 */
-webkit-box-shadow:rgba(66, 140, 240, 0.5) 0px 3px 10px;
-moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 3px 10px;
box-shadow: rgba(66, 140, 240, 0.5) 0px 3px 10px;}
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="css/window.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" language="javascript" src="js/jquery-1.4.4.min.js"></script>
<script language="javascript">
$(function(){
//显示div
var centerWin = $("#centerwin");
$("#centerpop").click(function(){
centerWin.show("slow");
});
//关闭div
centerWin.children(".title").children("img").click(function(){
centerWin.hide("slow");
});
//拖动div
$(".title").mousedown(function(e){
//改变指针形状
$(this).css("cursor","move");
var offset = $(this).offset(); //div页面的位置
var x=e.pageX - offset.left;
var y=e.pageY - offset.top;
$(document).bind("mousemove",function(ev){
$("#centerwin").stop();
var _x = ev.pageX - x;
var _y = ev.pageY - y;
centerWin.animate({left:_x+"px",top:_y+"px"},10);
});
});
$(document).mouseup(function(){
$("#centerwin").css("cursor","default");
$(this).unbind("mousemove");
});
})
</script>
</head>
<body>
<a href="#" id="centerpop">显示窗口</a>
<div class="window" id="centerwin">
<div class="title"><div class="info">张三的资料信息</div><img src="img/c2.png" alt="关闭" title="关闭"/></div>
<div class="content">
<ul>
<li>姓名：张三</li>
<li>爱好：看电视</li>
<li>职业：上网</li>
<li>最大的愿望：天天睡觉</li>
<li>姓名：张三</li>
<li>爱好：看电视</li>
<li>职业：上网</li>
<li>姓名：天天睡觉天天睡觉天天睡觉</li>
</ul>
</div>
<div class="sure">确认</div>
</div>
</body>
</html>
