JS模仿MSN右下角弹出提示框
<style type="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: 1px solid #CCCCCC;
background-color: #eeeeee;
padding: 1px;
overflow: hidden;
display: none;
font-size: 12px;
z-index: 10;
}
#tip p
{
padding: 6px;
}
#tip h1, #detail h1
{
font-size: 14px;
height: 25px;
line-height: 25px;
background-color: #0066CC;
color: #FFFFFF;
padding: 0px 3px 0px 3px;
filter: Alpha(Opacity=100);
}
#tip h1 a, #detail h1 a
{
float: right;
text-decoration: none;
color: #FFFFFF;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var divTip = document.createElement("div");
divTip.id="tip";
divTip.innerHTML="<h1><a href='javascript:void(0)' onclick='start()'>×</a>您有1条新消息</h1><p><a href='javascript:void(0)' onclick='showwin()'>点击这里查看详细</a></p>";
divTip.style.height='0px';
divTip.style.bottom='0px';
divTip.style.position='fixed';
document.body.appendChild(divTip);
}
var handle;
function start(count)//参数为新短信个数
{
var obj = document.getElementById("tip");
obj.innerHTML=obj.innerHTML.replace("msgCount",count);
if (parseInt(obj.style.height)==0)
{ obj.style.display="block";
handle = setInterval("changeH('up')",20); //调用该方法 参数为循环调用的时间
}else
{
handle = setInterval("changeH('down')",20)
}
}
function changeH(str)//逐步改变窗体的高一次递增 或 递减8px
{
var obj=document.all?document.all["tip"] : document.getElementById("tip");
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";
}
}
function showwin()
{
document.getElementsByTagName("html")[0].style.overflow = "hidden";
start();
window.open("/member/managemsg.aspx");
}
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="start()">点击这里测试</a>
</body>
*
{
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: 1px solid #CCCCCC;
background-color: #eeeeee;
padding: 1px;
overflow: hidden;
display: none;
font-size: 12px;
z-index: 10;
}
#tip p
{
padding: 6px;
}
#tip h1, #detail h1
{
font-size: 14px;
height: 25px;
line-height: 25px;
background-color: #0066CC;
color: #FFFFFF;
padding: 0px 3px 0px 3px;
filter: Alpha(Opacity=100);
}
#tip h1 a, #detail h1 a
{
float: right;
text-decoration: none;
color: #FFFFFF;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var divTip = document.createElement("div");
divTip.id="tip";
divTip.innerHTML="<h1><a href='javascript:void(0)' onclick='start()'>×</a>您有1条新消息</h1><p><a href='javascript:void(0)' onclick='showwin()'>点击这里查看详细</a></p>";
divTip.style.height='0px';
divTip.style.bottom='0px';
divTip.style.position='fixed';
document.body.appendChild(divTip);
}
var handle;
function start(count)//参数为新短信个数
{
var obj = document.getElementById("tip");
obj.innerHTML=obj.innerHTML.replace("msgCount",count);
if (parseInt(obj.style.height)==0)
{ obj.style.display="block";
handle = setInterval("changeH('up')",20); //调用该方法 参数为循环调用的时间
}else
{
handle = setInterval("changeH('down')",20)
}
}
function changeH(str)//逐步改变窗体的高一次递增 或 递减8px
{
var obj=document.all?document.all["tip"] : document.getElementById("tip");
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";
}
}
function showwin()
{
document.getElementsByTagName("html")[0].style.overflow = "hidden";
start();
window.open("/member/managemsg.aspx");
}
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="start()">点击这里测试</a>
</body>
作者：Cat Qi
出处：http://qixuejia.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
出处：http://qixuejia.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
分类:
前端：JavaScript
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
2009-09-16 childNodes