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程序设计有所帮助。