当前位置:编程学习 > C#/ASP.NET >>

无刷新实时提示消息列子(类似QQ右下角的消息显示)

本人今天闲来没事,写了下这个功能!直接拷贝进去就能用!不懂的私信我!也可以问我要QQ咨询!废话不多说,下面看代码!

CSS样式添加:
 <style>
        body
        {
            margin: 0;
            padding: 0 10px 0 10px;
            height: 100%;
            overflow: auto;
            background: white;
            font-size: 12px;
        }
        #wrap
        {
            display: block;
            bottom: 0px;
            right: 1px !important;
            right: 18px;
            width: 200px;
            line-height: 30px;
            position: fixed;
            border: 1px solid #fff;
            text-align: center;
            color: white;
            background: green;
        }
        *html
        {
            overflow-x: auto;
            overflow-y: auto;
        }
        * html #wrap
        {
            position: absolute;
        }
    </style>

网页代码添加:
 <div id="wrap" style="display: none">
        <a onclick="closediv()" href="#" style="color:White " >关闭</a><br />
        <label id="message">
        </label>
    </div>
    <script type="text/javascript">
    //关闭提示消息
        function closediv() {
            $("#wrap").fadeOut(1000);
        }
        function show() {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "text",
                url: "Table.aspx/GetMessage", //传入后台的地址/方法
                data: null, //参数,这里是一个json语句
                success: function (result) {
                    if (result.toString() == "") {
                    }
                    else {
                        $("#wrap").fadeIn(1000);
                        var myObject = eval('(' + result + ')');
                        document.getElementById("message").innerHTML = myObject.d;
                    }
                }
            });
        }
        //定时器,自己可以设定多少时间执行一次 
        setInterval(show, 8000);
    </script>
后台代码添加:
  [WebMethod]
         public static string GetMessage()
         {
             return "您有新消息,请注意查收!";
         }

后台方法自己写! --------------------编程问答-------------------- 不错,顶上去 --------------------编程问答-------------------- 网页错误详细信息

用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
时间戳: Mon, 23 Dec 2013 08:30:14 UTC


消息: '$' 未定义
行: 63
字符: 13
代码: 0
URI: http://localhost:10246/Fusionshow/liuliangtongji/MessOpen.aspx

--------------------编程问答-------------------- 楼上的!引用下JQUERY
补充:.NET技术 ,  ASP.NET
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,