div模拟的小窗口

轻量级的小窗口，在脱离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="width: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; width: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>

 

posted @ 2013-02-19 16:49  轮回  阅读(1493)  评论(0)  编辑  收藏  举报