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:
.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 ;}
<!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 >
![]()
< 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 >