js右下角通知提示框的實現
阿新 • • 發佈：2019-01-23
1、需要在頁面的body中載入彈出的方法：
<body onLoad="document.getElementById('tip').style.height='0px';start()">2、需要把提示的div放到頁面的底部
<div id="tip" style="text-align:12px;"><h1><a href="javascript:void(0)" onclick="start()">×</a>最新通知</h1> <ul> <li> <img src="/images/fangkuai.png" /> 這裡有一個通知<a href="#">檢視</a>！</li>
<pre name="code" class="html"><span style="white-space:pre"> </span><li> <img src="${ctx}/images/fangkuai.png" />
這裡有一個通知<span style="font-family: Arial, Helvetica, sans-serif;"><a href="#">檢視</a></span>！</li></ul></div> 3、這裡是js主要方法<span style="white-space:pre"> </span><li> <img src="${ctx}/images/fangkuai.png" /> 這裡有一個通知<span style="font-family: Arial, Helvetica, sans-serif;"><a href="#">檢視</a></span>！</li>
<script type="text/javascript"> //通知提示資訊 var handle; function start(){ var obj = document.getElementById("tip"); if (parseInt(obj.style.height)==0){ obj.style.display="block"; handle = setInterval("changeH('up')",2); }else{ handle = setInterval("changeH('down')",2) } } function changeH(str){ var obj = document.getElementById("tip"); if(str=="up"){ if (parseInt(obj.style.height)>200){ clearInterval(handle); }else{ obj.style.height=(parseInt(obj.style.height)+8).toString()+"px"; } } if(str=="down"){ if (parseInt(obj.style.height)<8){ clearInterval(handle); obj.style.display="none"; }else{ obj.style.height=(parseInt(obj.style.height)-8).toString()+"px"; } } } function showwin(){ document.getElementsByTagName("html")[0].style.overflow = "hidden"; start(); document.getElementById("shadow").style.display="block"; document.getElementById("detail").style.display="block"; } function recover(){ document.getElementsByTagName("html")[0].style.overflow = "auto"; document.getElementById("shadow").style.display="none"; document.getElementById("detail").style.display="none"; } </script>
4、這裡是css樣式
<style type="text/css">
#tip ul li{}
#tip {
position:fixed;
right:0px;
bottom:0px;
height:0px;
width:300px;
border:1px solid #8093ba;
background-color:#ffffff;
padding:1px;
overflow:hidden;
display:none;
font-size:12px;
z-index:10;
}
#tip h1 {
font-size:14px;
height:26px;
line-height:26px;
background-color:#0587DF;
color:#fff;
padding:0px 3px 0px 3px;
}
#tip p {padding-left:10px; color:#000000;}
#tip h1 a {float:right;text-decoration:none;color:#fff;}
</style>