网页右下角弹窗效果

最新推荐文章于 2023-12-20 10:56:45 发布

不曾离开

最新推荐文章于 2023-12-20 10:56:45 发布

阅读量936

点赞数

分类专栏： .NET 文章标签：网页右下角弹窗效果

本文链接：https://blog.csdn.net/whl632359961/article/details/56673798

版权

.NET 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="弹窗.WebForm1" %>

<!DOCTYPE html>
      
<style type="text/css">
    #winpop
    {
        width: 200px;
        height: 0px;
        position: absolute;
        right: 5px;
        bottom: 5px;
        border: 1px solid #999999;
        margin: 0;
        padding: 1px;
        overflow: hidden;
        display: none;
        background:  #FFFFFF;
    }

        #winpop .title
        {
            width: 100%;
            height: 20px;
            line-height: 20px;
            background: #FFCC00;
            font-weight: bold;
            text-align: center;
            font-size: 12px;
        }

        #winpop .con
        {
            width: 100%;
            height: 80px;
            line-height: 80px;
            font-weight: bold;
            font-size: 12px;
            color: #FF0000;
            text-decoration: underline;
            text-align: center;
        }

    #silu
    {
        font-size: 13px;
        color: #999999;
        position: absolute;
        right: 0;
        text-align: right;
        text-decoration: underline;
        line-height: 22px;
    }

    .close
    {
        position: absolute;
        right: 4px;
        top: -1px;
        color: #FFFFFF;
        cursor: pointer;
    }
</style>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>右下角的弹窗，消息框</title>
</head>



<script type="text/javascript">
    function tips_pop() {
    var MsgPop = document.getElementById("winpop");//获取窗口这个对象,即ID为winpop的对象
    var popH = parseInt(MsgPop.style.height);//用parseInt将对象的高度转化为数字,以方便下面比较
    if (popH == 0) { 
        MsgPop.style.display = "block";//那么将隐藏的窗口显示出来
        show = setInterval("changeH('up')", 2);//开始以每0.002秒调用函数changeH("up"),即每0.002秒向上移动一次
    }
    else { 
        hide = setInterval("changeH('down')", 2);//开始以每0.002秒调用函数changeH("down"),即每0.002秒向下移动一次
    }
}
    function changeH(str) {
        var MsgPop = document.getElementById("winpop");
        var popH = parseInt(MsgPop.style.height);
        if (str == "up") { 
            if (popH <= 100) { //如果转化为数值的高度小于等于100
                MsgPop.style.height = (popH + 4).toString() + "px";//高度增加4个象素
            }
            else {
                clearInterval(show);//否则就取消这个函数调用,如果高度超过100象度了,就不再增长了
            }
        }
        if (str == "down") {
            if (popH >= 4) { 
                MsgPop.style.height = (popH - 4).toString() + "px";//那么窗口的高度减少4个象素
            }
            else { //否则
                clearInterval(hide); //否则就取消这个函数调用,意思就是如果高度小于4个象度的时候,就不再减了
                MsgPop.style.display = "none"; 
            }
        }
    }
    window.onload = function () { //加载
        document.getElementById('winpop').style.height = '0px';
        setTimeout("tips_pop()", 800); //3秒后调用tips_pop()这个函数
    }
</script>
<body>
    <form id="form1" runat="server">
    <div id="silu">
        <button οnclick="tips_pop()">测试按钮</button></div>
    <div id="winpop">
        <div class="title">您有新的消息<span class="close" οnclick="tips_pop()">X</span></div>
        <div class="con">你有未读信息(1)</div> 
    </div>
    </form>
 <%--   整个页面直接复制走，运行就可以看到效果。
做一个服务，检测数据的变化。网页定时刷新下。实时的获取提醒消息。--%>
</body>
</html>

不曾离开

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页右下角弹窗效果

#winpop { width: 200px; height: 0px; position: absolute; right: 5px; bottom: 5px; border: 1px solid #999999; margin: 0; padding: 1px
复制链接

扫一扫

专栏目录