<!DOCTYPE HTML> ???<head> ???????<title>JS实现右下角弹窗</title> ???????<meta http-equiv="content-type" content="text/html;charset=UTF-8"> ???????<style type="text/css"> ???????????.win-pop { ???????????????width: 200px; ???????????????height: 0; ???????????????position: absolute; ???????????????right: 0; ???????????????bottom: 0; ???????????????border: 1px solid #999999; ???????????????padding: 5px; ???????????????overflow: hidden; ???????????????font-weight: bold; ???????????????display: none; ???????????????background: #FFF; ???????????????font-size: 12px; ???????????} ???????????.win-pop .title { ???????????????width: 100%; ???????????????height: 30px; ???????????????line-height: 30px; ???????????????background: #FFCC00; ???????????????text-align: center; ???????????????font-size: 14px; ???????????} ???????????.win-pop .con { ???????????????width: 100%; ???????????????height: 80px; ???????????????color: #FF0000; ???????????????text-decoration: underline; ???????????} ???????????.close { ???????????????position: absolute; ???????????????right: 5px; ???????????????top: -3px; ???????????????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 <= 100) { ???????????????????????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"; ???????????????????} ???????????????} ???????????} ???????????????????????window.onload = function() { ???????????????document.getElementById("#winPop").style.height = "0px"; ???????????????setTimeout("tips_pop()", 800); ???????????} ???????</script> ???</head> ???<body> ???????<div id="winPop" class="win-pop"> ???????????<div class="title">您有新的消息 ???????????????<span class="close" onclick="tips_pop()">x</span> ???????????</div> ???????????<div class="con">信息内容框</div> ???????</div> ???</body></html>JS 实现右下角弹窗
原文地址：https://www.cnblogs.com/minozMin/p/9860450.html