轻量级的小窗口,在脱离js框架时,可以方便的实现该功能,比较简单,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> </head> <body> <div>header</div> <br/><br/> <br/><br/> <textarea id="txtContent" style="500px;height:100px;">国务院办公厅2月18日印发了国民旅游休闲纲要,该纲要鼓励机关、团体、企事业单位引导职工灵活安排全年休假时间,完善针对民办非企业单位、有雇工的个体工商户等单位职工的休假保障措施。预计到2020年,职工带薪年休假制度基本得到落实,城乡居民旅游休闲消费水平大幅增长。</textarea><br/><br/><br/><br/> <div><a onclick="showHint(this);return false;" href="###" >Test1</a></div> <div><a onmouseover="showHint(this);" onmouseout="hideHint();" href="###" >Test2</a></div> <br/><br/><br/><br/><br/><br/> <div>footer</div> <div id="divhint" style="display:none; position:absolute; border:solid 1px #99BBE8; 360px;FILTER: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=silver,strength=4) alpha(opacity=90);z-index:999;"> <div id="hinthead" style="background-color:#3577B3;color:White;height:20px;"><span style="float:right;padding-right:10px; text-decoration:none; cursor:pointer; font-family:Arial;" onclick="hideHint();return false;">x</span></div> <div id="hintbody" style="padding:10px;background-color:#E9F3F8;"></div> </div> </body> </html> <script type="text/javascript"> window.onload= function(){init();}; function init() { //if (getBrowserVersion().substring(0,2)=="IE") if(!+[1,]) document.attachEvent("onclick", function () { hideHint(); }); else document.addEventListener("onclick", function () { hideHint(); }, false); } function $(obj) { if (document.getElementById(obj) == null) { return null; } return document.getElementById(obj) } function showHint(obj,txt) { var pos = getxy(obj); var hint = $("divhint") hint.style.left = pos.left; hint.style.top = pos.top + pos.height; if (txt) $("hintbody").innerHTML = txt; else $("hintbody").innerHTML = $("txtContent").innerHTML; hint.style.display = "block"; cancelEvent(); } function hideHint() { $("hintbody").innerHTML = ""; $("divhint").style.display = "none"; } function getxy(o) { var t = o.offsetTop; var l = o.offsetLeft; var w = o.offsetWidth; var h = o.offsetHeight; while (o = o.offsetParent) { t += o.offsetTop; l += o.offsetLeft; } var j = { "width": w, "height": h, "top": t, "left": l }; //json数据格式 return j; } function cancelEvent() { event.cancelBubble = true; } //获取浏览器版本 function getBrowserVersion() { var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] : (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] : (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] : (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0; //以下进行测试 if (Sys.ie) return 'IE' + Sys.ie; if (Sys.firefox) return 'Firefox' + Sys.firefox; if (Sys.chrome) return 'Chrome' + Sys.chrome; if (Sys.opera) return 'Opera' + Sys.opera; if (Sys.safari) return 'Safari' + Sys.safari; } </script>