功能:在頁面的右下角彈出一個提示窗口
實現方法:
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.onload=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" onclick="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 onclick="showPageMsg()">查看全部</label></div> </div> </div> </body> </html>
效果:
應用場景:
1.在項目上線後,需要把每次更新的東西記錄下來或者展示給用戶看,就可以通過這樣的形式,當點擊查看全部時候,彈出個模態窗口展示這次更新的所有內容。
2.做一些提示,如現在所處的菜單位置。