JS模仿MSN右下角弹出提示框

weixin_34336526

于 2019-01-07 23:43:20 发布

阅读量116

点赞数

文章标签： javascript xhtml ViewUI

本文详细介绍了一种使用HTML和JavaScript实现的动态提示框效果，包括提示框的创建、显示和隐藏过程，以及如何通过定时器和高度变化实现平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">无标题文档

<input id="btn" onclick="show();" type="button" value="Show" /><div id="tip" style="height:0px; position:fixed; bottom:0px;" data-mce-style="height: 0px; position: fixed; bottom: 0px;"><h1><a onclick="show()" href="javascript:void(0)" data-mce-href="javascript:void(0)">×</a>您有1条新消息</h1><p><a onclick="showwin()" href="javascript:void(0)" data-mce-href="javascript:void(0)">点击这里查看详细</a></p></div>
RunCodeCopyCode

<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>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。