CSS:
div.poptip {
position: absolute;
border-bottom: 2px solid #CCC;
border-right: 2px solid #CCC;
padding: 0;
text-align: left;
width: 300px;
opacity: 0.9;
}
div.innertip {
background: #FFF;
border: 1px solid #BBB;
line-height: 1.8em;
}
.poptip > .innertip {
margin-bottom: -1px;
}
div.poptip a {
font-weight: normal;
text-decoration: none;
}
div.poptip p.title {
background: #EEE url(DreamImage/dotline_h.gif) repeat-x bottom;
font-weight: bold;
color: #666;
padding: 0 0.5em;
margin: 0;
}
.poptip .close {
background: url(DreamImage/icon_del.gif) no-repeat center;
float: right;
display: block;
width: 1.5em;
text-indent: -9999px;
overflow: hidden;
}
.poptip ul {
margin: 0.5em 1em;
padding: 0;
list-style: none;
}
.poptip li {
background: url(DreamImage/icon_link.gif) no-repeat 0 5px;
padding-left: 1em;
height: 1.8em;
overflow: hidden;
}
.poptip .readmore {
margin: 0 0.5em;
border-top: 1px solid #DAE1F1;
text-align: right;
background: url(DreamImage/icon_list.gif) no-repeat right;
padding-right: 1em;
}
.hnli{
width:255px;
} *
脚本
<script language="javascript" type="text/javascript">
function tagnone()
{
document.getElementById("tipdiv").style.display="none";
}
var offX = 2;
var offY = 0;
var width = 0;
var height = 0;
var scrollX = 0;
var scrollY = 0;
var x = 0;
var y = 0;
function conentall(name,conent)
{
var tip = parent.document.getElementById("tipDiv");
tip.style.display="inline";
tip.innerHTML = "<div class='poptip'><div class='innertip'><p class='title'><a οnclick='tagnone()' class='close' style='cursor:hand' title='关闭'>关闭</a>名称:"+name+"</p><ul><li>内容& amp; lt;/li> "+conent+"</ul></p></div></div>";
if (window.innerWidth) width = window.innerWidth - 18;
else if (document.documentElement && document.documentElement.clientWidth)
width = document.documentElement.clientWidth;
else if (document.body && document.body.clientWidth)
width = document.body.clientWidth;
if (window.innerHeight) height = window.innerHeight - 18;
else if (document.documentElement && document.documentElement.clientHeight)
height = document.documentElement.clientHeight;
else if (document.body && document.body.clientHeight)
height = document.body.clientHeight;
if (typeof window.pageXOffset == "number") scrollX = window.pageXOffset;
else if (document.documentElement && document.documentElement.scrollLeft)
scrollX = document.documentElement.scrollLeft;
else if (document.body && document.body.scrollLeft)
scrollX = document.body.scrollLeft;
else if (window.scrollX) scrollX = window.scrollX;
if (typeof window.pageYOffset == "number") scrollY = window.pageYOffset;
else if (document.documentElement && document.documentElement.scrollTop)
scrollY = document.documentElement.scrollTop;
else if (document.body && document.body.scrollTop)
scrollY = document.body.scrollTop;
else if (window.scrollY) scrollY = window.scrollY;
x=event.pageX?event.pageX:event.clientX+scrollX;
y=event.pageY?event.pageY:event.clientY+scrollY;
if(x+tip.offsetWidth+offX>width+scrollX){
x=x-tip.offsetWidth-offX;
if(x<0)x=0;
}else x=x+offX;
if(y+tip.offsetHeight+offY>height+scrollY){
y=y-tip.offsetHeight-offY;
if(y<scrollY)y=height+scrollY-tip.offsetHeight;
}else y=y+offY;
tip.style.left=x+"px";
tip.style.top=y+"px";
//tip.style.display = '';
}
</script>
html部分
<a class="liebiao" style="cursor:hand" οnmοuseοut="tagnone();" οnmοuseοver="conentall('<%# Eval("Shopping_Name")%>','<%# Eval("Shopping_Conent")%>');"><%# ChangPowerStr(DataBinder.Eval(Container, "DataItem.Shopping_Conent").ToString())%></a>
<!--弹出详细内容div-->
<div id="tipDiv" style="BORDER-RIGHT:#333366 1px solid; BORDER-TOP:#333366 1px solid; DISPLAY:none; Z-INDEX:1; BORDER-LEFT:#333366 1px solid; BORDER-BOTTOM:#333366 1px solid; POSITION:absolute; BACKGROUND-COLOR:#ffffcc">alt描述</div>
<!--弹出详细内容div-->