zoukankan      html  css  js  c++  java
  • 网页右下角弹出窗口

    该代码兼容IE和firefox,简单,实用。

    <style type="text/css">
    #winpop { 200px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #999999; margin:0; padding:1px; overflow:hidden; display:none; background:#FFFFFF}
    #winpop .title { 100%; height:20px; line-height:20px; background:#290052; font-weight:bold; text-align:center; font-size:12px; color:#FFFFFF; }
    #winpop .con { 100%; height:80px; line-height:80px; font-weight:bold; font-size:12px; color:#FF0000; text-decoration:underline; text-align:center}
    .close { position:absolute; right:4px; top:-1px; color:#FFFFFF; cursor:pointer}
    </style>
    <script type="text/javascript">
    function tips_pop(){
      var MsgPop=document.getElementById("winpop");
      var popH=parseInt(MsgPop.style.height);
       if (popH==0){
       MsgPop.style.display="block";
      show=setInterval("changeH('up')",2);
       }
      else {
       hide=setInterval("changeH('down')",2);
      }
    }
    function changeH(str) {
     var MsgPop=document.getElementById("winpop");
     var popH=parseInt(MsgPop.style.height);
     if(str=="up"){
      if (popH<=100){
      MsgPop.style.height=(popH+4).toString()+"px";
      }
      else{  
      clearInterval(show);
      }
     }
     if(str=="down"){ 
      if (popH>=4){
      MsgPop.style.height=(popH-4).toString()+"px";
      }
      else{
      clearInterval(hide);
      MsgPop.style.display="none";
      }
     }
    }
    window.onload=function(){
    document.getElementById('winpop').style.height='0px';
    setTimeout("tips_pop()",800);
    }
    </script>

    <body leftmargin="0" topmargin="0" bgcolor="#000000">

    <div id="winpop">
     <div class="title">短消息<span class="close" onclick="tips_pop()">X</span></div>
        <div class="con">未读消息 (3)</div>
    </div>


       本人博客的文章大部分来自网络转载,因为时间的关系,没有写明转载出处和作者。所以在些郑重的说明:文章只限交流,版权归作者。谢谢

  • 相关阅读:
    redis API使用说明
    javascript (js)判断手机号码中国移动、中国联通、中国电信
    Spring MVC 框架搭建及详解
    Oracle 树操作(select…start with…connect by…prior)
    工作流开发总结
    jQuery 关于ScrollableGridPlugin.js(固定表头)插件的逐步解析
    关于@RequestBody关键字
    linux中的目录的作用
    接口和抽象类的区别
    jdbc操作和开启事务
  • 原文地址:https://www.cnblogs.com/wzg0319/p/1565406.html
Copyright © 2011-2022 走看看