【仿IE顶部弹出提示】可用来设置公告可关闭

最新推荐文章于 2022-07-31 05:00:00 发布

linwei_211

最新推荐文章于 2022-07-31 05:00:00 发布

阅读量165

点赞数

分类专栏： javaScript

本文链接：https://blog.youkuaiyun.com/linwei_211/article/details/84123207

版权

javaScript 专栏收录该内容

20 篇文章

订阅专栏

第一种方式：基础写法（浏览器页面上方全占满，提示信息前后都有图片，鼠标放在图片上显示小手，点击图片关闭）
<div id='top_tooltip' style="BORDER-RIGHT: #fff 1px solid;
BORDER-TOP: #fff 1px solid; DISPLAY: none;
FONT-SIZE: 12px; BACKGROUND: #ffffe1;
MARGIN: 1px auto; BORDER-LEFT: #fff 1px solid;
COLOR: #ff4e00; LINE-HEIGHT: 26px;
BORDER-BOTTOM: #aca899 1px solid;
HEIGHT: 26px; TEXT-ALIGN: left"
>
<A style="DISPLAY: inline;
BACKGROUND: url(warning.gif);
FLOAT: left; MARGIN: 5px 10px;
WIDTH: 15px; CURSOR: pointer; HEIGHT: 15px"
οnclick='set_top_visible("none");'
>
</A>
<A style="DISPLAY: inline; BACKGROUND: url(add.gif);
FLOAT: right; MARGIN: 5px 10px; WIDTH: 15px; CURSOR: pointer; HEIGHT: 15px"
οnclick='set_top_visible("none");'
></A>
<SPAN style="COLOR: #333">系统提醒您：</SPAN>您当前使用的浏览器版本过低，可能无法正常显示本社区内容，请升级您的浏览器到最新版！
</div>
<SCRIPT type=text/javascript>
        var st = 0000;
        var ht = 5000;
        function set_top_visible(v){
            (!v) && (v = "block");
            try
            {
                document.getElementById("top_tooltip").style.display=v;
            }
            catch(e){}
        }
        setTimeout("set_top_visible()",st);
    </SCRIPT>
----------------------------------------------------------------
第二种方式：比较牛差的写法，用document.createElemen（浏览器页面上方中间显示占，提示信息后有图片，鼠标放在图片上显示小手，点击图片关闭）
<SCRIPT type=text/javascript>
      Ext.onReady(function() {
   if ((Ext.isIE && (Ext.isIE6 || Ext.isIE7))) {//用ext的已有方法判断是否是ie6或者ie7
    var newDiv = document.createElement("div");

    newDiv.style.position = "absolute";
    newDiv.style.zIndex = "9999";
    newDiv.style.width = "1000px";
    newDiv.style.height = "16px";
    newDiv.style.top = "1px";
    newDiv.style.left = (parseInt(document.body.scrollWidth)-685) / 2 + "px";
    newDiv.style.background = "#ffffe1";
    newDiv.style.border = "#fff 1px solid";
    newDiv.style.padding = "2px";

    newDiv.id="top_tooltip";
    newDiv.style.color="#ff4e00";
    //newDiv.innerHTML = '<SPAN style="COLOR: #333">系统提醒您：</SPAN>您当前使用的浏览器版本过低，可能无法正常显示本社区内容，请升级您的浏览器到最新版！';
    //js页面不让写中文，故直接用的ASC码
    newDiv.innerHTML = '<SPAN style="COLOR: #333"><strong>\u6ce8\u610f\uff1a</strong></SPAN>\u8be5\u7cfb\u7edf\u91c7\u7528\u4e86\u5148\u8fdb\u7684\u5bcc\u5ba2\u6237\u7aef\u6280\u672f\uff0c\u60a8\u6240\u4f7f\u7528\u7684\u6d4f\u89c8\u5668\u8f83\u4e3a\u9648\u65e7\uff0c\u5efa\u8bae\u60a8\u5c06\u6d4f\u89c8\u5668\u5347\u7ea7\u81f3IE8\u6216\u66f4\u9ad8\u7248\u672c\u4ee5\u83b7\u5f97\u66f4\u597d\u7684\u4f53\u9a8c\u3002';

    var img=new Image();
    img.src="images/delete.gif";
    img.style.cursor= 'pointer';
    img.onclick = function(){set_top_visible("none");}'
    function set_top_visible(v){
     (!v) && (v = "block");
     try
     {
      document.getElementById("top_tooltip").style.display=v;
     } catch(e){}
    }
    newDiv.appendChild(img);
    document.body.appendChild(newDiv);
   }
     });
</SCRIPT>