JS实现简单的右下角弹出提示窗口完整实例
本文实例讲述了JS实现简单的右下角弹出提示窗口效果。分享给大家供大家参考，具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>aa</title>
<styletype="text/css">
*{
margin:0px;
padding:0px;
}
html,body{
height:100%;
}
body{
font-size:14px;
line-height:24px;
}
#tip{
position:absolute;
right:0px;
bottom:0px;
height:0px;
width:180px;
border:1pxsolid#CCCCCC;
background-color:#eeeeee;
padding:1px;
overflow:hidden;
display:none;
font-size:12px;
z-index:10;
}
#tipp{
padding:6px;
}
#tiph1{
font-size:14px;
height:25px;
line-height:25px;
background-color:#0066CC;
color:#FFFFFF;
padding:0px3px0px3px;
filter:Alpha(Opacity=100);
}
#tiph1a,#detailh1a{
float:right;
text-decoration:none;
color:#FFFFFF;
}
</style>
<scripttype="text/javascript">
window.onload=function(){
vardivTip=document.createElement("div");
divTip.id="tip";
divTip.innerHTML="<h1><ahref='javascript:void(0)'onclick='start()'>关闭</a>title</h1><p><ahref='javascript:void(0)'onclick='showwin()'>content</a></p>";
divTip.style.height='0px';
divTip.style.bottom='0px';
divTip.style.position='fixed';
document.body.appendChild(divTip);
}
varhandle;
functionstart(count){
varobj=document.getElementById("tip");
if(parseInt(obj.style.height)==0){
obj.style.display="block";
handle=setInterval("changeH('up')",20);
}
else{
handle=setInterval("changeH('down')",20)
}
}
functionchangeH(str){
varobj=document.all?document.all["tip"]:document.getElementById("tip");//docuemnt.all??????
if(str=="up"){
if(parseInt(obj.style.height)>100)
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";
}
}
functionshowwin(){
//document.getElementsByTagName("html")[0].style.overflow="hidden";
start();
}
</script>
</head>
<body>
<ahref="#"onclick="start()">click</a>
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。