• 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="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> 
  • 相关阅读:
    非post请求时整个url作为参数传递出现bug
    UML类图及类与类之间的关系
    MyBatis中if,where,set标签
    MySQL主从复制配置遇到的部分问题
    SpringMVC的各种参数绑定方式
    对解释器模式的认识
    大型网站技术架构案例分析
    淘宝网质量属性描述
    阅读架构漫谈笔记
    阅读计划——《软件需求十步走》06
  • 原文地址:https://www.cnblogs.com/dreign/p/2917342.html
Copyright © 2020-2023  润新知