• 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>
    View Code

    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='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 {
                 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 {
                     100%;
                    height: 20px;
                    line-height: 20px;
                    background: #FFCC00;
                    font-weight: bold;
                    text-align: center;
                    font-size: 12px;
                }
    
                #winpop .con {
                     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>

    最终效果图:

    查看详情效果图 :

  • 相关阅读:
    CSS3笔记3
    blackeye部署
    解决企业员工异地办公需求
    Django基于正则表达式匹配URL
    Ubuntu修改Apache默认Web端口
    Django基础篇
    jQuery学习笔记
    HDFS NFS Gateway 无法启动、挂载失败问题(CM集群安装HDFS)
    在cm安装的大数据管理平台中集成impala之后读取hive表中的数据的设置(hue当中执行impala的数据查询)
    在hue里面集成spark2,使用oozie的调度
  • 原文地址:https://www.cnblogs.com/niesiao/p/9685595.html
Copyright © 2020-2023  润新知