在右下角弹出通知窗口

最新推荐文章于 2020-05-05 16:39:21 发布

weixin_33747129

最新推荐文章于 2020-05-05 16:39:21 发布

阅读量281

点赞数

文章标签： javascript ViewUI

原文链接：http://blog.51cto.com/stormkai/1624331

版权

功能：在页面的右下角弹出一个提示窗口

实现方法：

1.做一个div块，设置其位置注意position:fixed，然后隐藏该div块即设置display:none

2.当页面加载时候获得该div的高度，如果它的高度等于0,设置该div的diplay:block让其显示。

这里显示时候是让其高度慢慢增加直到全部出现停止。

当关闭时候是让其效果从上往下退出即高度慢慢缩小直至消失，同时设置该div的dislay:none。

源代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>右下角通知窗口</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    
    <style type="text/css">
        #winpop { width:302px; height:0px; position:fixed; right:0; bottom:0; border:1px solid #666; margin:0; padding:1px; overflow:hidden; display:none;}
        #winpop .title { width:100%; height:26px; line-height:20px; background:#D6D6D6; font-weight:bold; text-align:left; font-size:14px;}
        #winpop .con { width:100%; height:80px; font-size:14px; padding-left: 5px;padding-top: 7px;padding-right: 5px;}
        #winpop .bottom{ height: 40px; float: right; cursor: hand;}
        .close { position:absolute; right:4px; top:-1px; color:#FFF; 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<=144){
                    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";  //隐藏DIV
                  }
             }
        }
        function showPageMsg() {
            alert("弹出更新具体内容");
        }
        window.οnlοad=function(){//加载
            document.getElementById('winpop').style.height='0px';
            setTimeout("tips_pop()",2000);//2秒后调用tips_pop()这个函数
        }
    </script>

  </head>
  
  <body>
    This is my HTML page. <br>
    <div id="winpop">
        <div class="title">系统升级通知（V2.4.0）<span class="close" οnclick="tips_pop()" style="text-align: center;">关闭</span></div>
        <div style="background: #E2EBF2; width: 100%; height: 144px;">
            <div class="con">系统于6月28日升级至V2.4.0版本。本次修改内容主要包括用户提出的针对决策支持、报表功能模块的问题、建议和需求等。</div>
            <div class="bottom"> <label οnclick="showPageMsg()">查看全部</label></div>
        </div>
           
    </div>
  </body>
</html>

效果：