c# 右下角新消息提醒框

html：

 <div id="winpop">
        <div class="title">新消息<span class="close" onclick="hideThis()">X</span></div>
        <div class="con"></div>
    </div>
    <div id="divEquipment" style="display: none;"></div>

js：

  function hideThis() {
            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") { //如果這個參數是UP
                if (popH <= 100) { //如果轉化為數值的高度小於等於100
                    MsgPop.style.height = (popH + 4).toString() + "px";//高度增加4個象素
                }
                else {
                    clearInterval(show);//否則就取消這個函數調用,意思就是如果高度超過100象度了,就不再增長了
                }
            }
            if (str == "down") {
                //if (popH >= 4) { //如果這個參數是down
                //    MsgPop.style.height = (popH - 4).toString() + "px";//那么窗口的高度減少4個象素
                //}
                //else { //否則
                    clearInterval(hide); //否則就取消這個函數調用,意思就是如果高度小於4個象度的時候,就不再減了
                    MsgPop.style.display = "none"; //因為窗口有邊框,所以還是可以看見1~2象素沒縮進去,這時候就把DIV隱藏掉
                //}
            }
        }

 

        setInterval("tips_pop()", 3000);//1分鍾一次
        window.onload = function () { //加載
            document.getElementById('winpop').style.height = '0px';
        }
        function tips_pop() {
            debugger;
            var MsgPop = document.getElementById("winpop");//獲取窗口這個對象,即ID為winpop的對象
            var popH = parseInt(MsgPop.style.height);//用parseInt將對象的高度轉化為數字,以方便下面比較
            if (popH == 0) { //如果窗口的高度是0
                $.post("GetDateList.ashx", function (data) {
                    data = JSON.parse(data);
                    if (data != "") {
                        var content = "<div style='margin-top:20px;'>本月有" + data.length + "條信息報修超過三次<span style='display:block;margin:10px 70px;'><input type='button' value='點擊查看' onclick='OpenDetail()' /></span></div>";
                        $(".con").html(content);
                        var divEquipment = "";
                        for (var i = 0; i < data.length; i++) {
                            divEquipment += "<a href='javascript:void(0)'  style='width:63px; dispaly:block;float:left; margin:10px;'>" + data[i].sbbh + "</a>";
                            //onclick='reloadEquipment(" + data[i].sbbh + ")'
                        }
                        $("#divEquipment").html(divEquipment);
                        //if (data.DeviceCode != undefined && data.DeviceCode != "") {
                        MsgPop.style.display = "block";//那么將隱藏的窗口顯示出來
                        show = setInterval("changeH('up')", 2);//開始以每0.002秒調用函數changeH("up"),即每0.002秒向上移動一次
                        play_click();
                        //}
                    }
                });
            }
        }
        //提示音樂
        function play_click() {
        var au = document.createElement("audio");
        au.preload = "auto";
        au.src = "../../Images/message.mp3";
        au.play();
        }
        function OpenDetail() {
            layer.open({
                type: 1,
                shadeClose: true,
                title: '設備編號',
                zIndex: 10,
                area: ['460px', '360px'], //寬高
                content: $("#divEquipment")
            });
        }
        function reloadEquipment(DeviceId) {
            window.open(url);
        }

css：

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

            #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: 30px;*/
                font-weight: bold;
                font-size: 12px;
                /*color: #FF0000;*/
                /*text-decoration: underline;*/
                /*padding-top: 20px;*/
                text-align: left;
            }

        .close {
            position: absolute;
            right: 4px;
            top: -1px;
            color: #FFFFFF;
            cursor: pointer;
        }

        #openclumnTable:hover {
            display: table;
        }
    </style>

需要引用的js文件：

<link href="../../Scripts/layer/layer/1.9.3/skin/layer.css" rel="stylesheet" />
<script src="../../Scripts/jquery-1.8.2.min.js"></script>
<script src="../../Scripts/layer/layer/1.9.3/layer.js"></script>

 

最終效果圖：

查看詳情效果圖 ：