类似于QQ弹出信息(比如弹出个人的待办事宜等)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS实现页面右下角弹出类似QQ或MSN的消息提示框 - www.webdm.cn</title>
</head>
<body>
<SCRIPT language=JavaScript>

</SCRIPT>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 参考 by q107770540</p>
</body>
</html>

通过定时器弹出提示窗口，很多OA有这种功能
<script>
function openWindow(win,winTitle,winWidth,winHeight)
  {
  var winleft=window.screen.width-winWidth-12;
  var winTop=window.screen.height-winHeight-75;
  window.open(win ,winTitle,'width='+ winWidth +'px,height='+ winHeight +'px,left='+ winleft +'px,top='+ winTop +'px,scrollbars=1,status=0');
  }
  </script>
  <script language="javascript" type="text/javascript" src="../js/Ajax.js"> </script>
  <script language="javascript" type="text/javascript">
  function check(typeStr)
{
var myurl="Tip.aspx?type="+typeStr;
var MyWebSend="";
xmlHttp.open("POST",myurl,true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = ValidateCallBack;
xmlHttp.send(MyWebSend);
}
function checkNormal()
{
  check('normal');
  window.setTimeout("checkNormal()",60000);
}
function checkCalendar()
{
  check('calendar');
  window.setTimeout("checkCalendar()",1200000);
}
function ValidateCallBack()
{
  if (xmlHttp.readyState == 4)
{
  if (xmlHttp.status == 200)
  {
  var result=xmlHttp.responseText;
  if(result.indexOf("Exist::")==0)
  {
  openWindow('popTip.aspx','smsWindows','430','220');
  }
}
  else
  {

}
  }
}
</script>
</head>
<body onload="checkNormal();checkCalendar();">  在popTop里绑定数据
<script>
  focus();
  TimeStart=30;
function MyTimer()
{
  if(TimeStart==0)
  window.close();
  if(document.getElementById("TimeShow"))
  document.getElementById("TimeShow").innerHTML=TimeStart;
  TimeStart--;
  var timer=setTimeout("MyTimer()",1000);
}
http://www.open-open.com/ajax/Popup.htm

一楼效果是有了，但跟我的要求还有点出路，我是要用数据库读取字段，类似于用json

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #msg_win{border: 1px solid #A67901;background: #EAEAEA;position: absolute;right: 0;font-size: 12px;font-family: Arial;margin: 0px;display: none;overflow: hidden;z-index: 99;}
        #msg_win .icos{position: absolute;top: 2px;top: 0px;right: 2px;z-index: 9;}
        #msg_win .icos a{float: left;color: #833B02;margin: 1px;text-align: center;font-weight: bold;width: 14px;height: 22px;line-height: 22px;padding: 1px;text-decoration: none;font-family: 'webdings';}
        #msg_win .icos a:hover{color: #fff;}
        #msg_title{background: #FECD00 url(bar_bg.gif) repeat-x 0 100%;border-bottom: 1px solid #A67901;border-top: 1px solid #FFF;border-left: 1px solid #FFF;color: #000;height: 25px;line-height: 25px;text-indent: 5px;}
        #msg_content{margin: 5px;margin-right: 0;width: 230px;height: 126px;overflow: hidden;}
    </style>
</head>
<body style="height: 2000px;">
    <script type="text/javascript">
        var Message = {
            set: function() {//最小化与恢复状态切换
                var sets = this.minbtn.status == 1 ? [0, 1, 'block', this.char[0], '最小化'] : [1, 0, 'none', this.char[1], '恢复'];
                this.minbtn.status = sets[0];
                this.win.style.borderBottomWidth = sets[1];
                this.content.style.display = sets[2];
                this.win.style.height = "auto";
                this.minbtn.innerHTML = sets[3]
                this.minbtn.title = sets[4];
                this.win.style.top = this.getY().top;
            },
            close: function() {//关闭
                this.win.style.display = 'none';
                window.onscroll = null;
            },
            setOpacity: function(x) {//设置透明度
                var v = x >= 100 ? '' : 'Alpha(opacity=' + x + ')';
                this.win.style.visibility = x <= 0 ? 'hidden' : 'visible'; //IE有绝对或相对定位内容不随父透明度变化的bug
                this.win.style.filter = v;
                this.win.style.opacity = x / 100;
            },
            show: function() {//渐显
                clearInterval(this.timer2);
                var me = this, fx = this.fx(0, 100, 0.1), t = 0;
                this.timer2 = setInterval(function() {
                    t = fx();
                    me.setOpacity(t[0]);
                    if (t[1] == 0) { clearInterval(me.timer2) }
                }, 10);
            },
            fx: function(a, b, c) {//缓冲计算
                var cMath = Math[(a - b) > 0 ? "floor" : "ceil"], c = c || 0.1;
                return function() { return [a += cMath((b - a) * c), a - b] }
            },
            getY: function() {//计算移动坐标
                var d = document, b = document.body, e = document.documentElement;
                var s = Math.max(b.scrollTop, e.scrollTop);
                var h = /BackCompat/i.test(document.compatMode) ? b.clientHeight : e.clientHeight;
                var h2 = this.win.offsetHeight;
                return { foot: s + h + h2 + 2 + 'px', top: s + h - h2 - 2 + 'px' }
            },
            moveTo: function(y) {//移动动画
                clearInterval(this.timer);
                var me = this, a = parseInt(this.win.style.top) || 0;
                var fx = this.fx(a, parseInt(y));
                var t = 0;
                this.timer = setInterval(function() {
                    t = fx();
                    me.win.style.top = t[0] + 'px';
                    if (t[1] == 0) {
                        clearInterval(me.timer);
                        me.bind();
                    }
                }, 10);
            },
            bind: function() {//绑定窗口滚动条与大小变化事件
                var me = this, st, rt;
                window.onscroll = function() {
                    clearTimeout(st);
                    clearTimeout(me.timer2);
                    me.setOpacity(0);
                    st = setTimeout(function() {
                        me.win.style.top = me.getY().top;
                        me.show();
                    }, 600);
                };
                window.onresize = function() {
                    clearTimeout(rt);
                    rt = setTimeout(function() { me.win.style.top = me.getY().top }, 100);
                }
            },
            init: function() {//创建HTML
                function $(id) { return document.getElementById(id) };
                this.win = document.createElement('div');
                this.win.style.width = 410;
                this.win.style.height = 202;
                this.win.id = "msg_win";
                this.win.innerHTML = '<div class="icos"><a href="javascript:void(0)" title="最小化" id="msg_min">0</a><a href="javascript:void(0)" title="关闭" id="msg_close">r</a></div><div id="msg_title">温馨提示</div><div id="msg_content"></div>';
                document.body.appendChild(this.win);
                var set = { minbtn: 'msg_min', closebtn: 'msg_close', title: 'msg_title', content: 'msg_content' };
                for (var Id in set) { this[Id] = $(set[Id]) };
                var me = this;
                this.minbtn.onclick = function() { me.set(); this.blur() };
                this.closebtn.onclick = function() { me.close() };
                this.char = navigator.userAgent.toLowerCase().indexOf('firefox') + 1 ? ['_', '::', '×'] : ['0', '2', 'r']; //FF不支持webdings字体
                this.minbtn.innerHTML = this.char[0];
                this.closebtn.innerHTML = this.char[2];
                setTimeout(function() {//初始化最先位置
                    me.win.style.display = 'block';
                    me.win.style.top = me.getY().foot;
                    me.moveTo(me.getY().top);
                }, 500);
                return this;
            }
        };
        Message.init();
        Message.title.innerHTML = '软键盘';
        Message.content.style.width = "400";
        Message.content.style.height = "165";
        Message.content.innerHTML = "内容部分";
    </script></body>
</html>看看这个

简单一点的代码其实就这样<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    #opopdiv {width:200px;height:0px;position:fixed !important;position:absolute;right:0;bottom:0;border:1px solid #FFCC00;overflow:hidden;display:none;}
    #opopdiv .title {width:100%;height:20px;line-height:20px;background:#0B9CD3;font-size:12px;border-bottom:1px solid #FFCC00;}
    #opopdiv .content {width:100%; height:100%;font-size:12px;}
    #opopdiv .close {position:absolute;right:4px;top:-1px;color:black;cursor:pointer;}
</style>
</head>
<body style="height:2000px;">
    <script type="text/javascript">
        function opop_up() {
            document.getElementById("opopdiv").style.display = "block";
            timer = setInterval("changeH(4)", 2);
        }

        function opop_down() {
            timer = setInterval("changeH(-4)", 2);
        }        function changeH(addH) {
            var MsgPop = document.getElementById("opopdiv");
            var popH = parseInt(MsgPop.style.height || MsgPop.currentStyle.height);
            if (popH <= 100 && addH > 0 || popH > -addH && addH < 0) {
                MsgPop.style.height = (popH + addH).toString() + "px";
            }
            else {
                clearInterval(timer);
                MsgPop.style.display = addH > 0 ? "block" : "none";
            }
        }               function opop_show(title, content) {
            var opopdiv = document.createElement("div");
            opopdiv.id = "opopdiv";
            document.body.appendChild(opopdiv);
            var strhtml = "<div class='title'>" + title + "<span class='close' onclick='opop_down()'>×</span></div>";
            strhtml += "<div class='content'>" + content + "</div>";
            opopdiv.innerHTML = strhtml;
            opop_up();
        }

        //opop_show("短消息提示", "<div style='text-align:center'>这是主题<div>当这个层被图片撑到最后一个位置时,又停止了.");
        opop_show("短消息提示", "<image height='100%' width='100%' src='backimg.jpg' alt='' />");
</script>
</body>
</html>

调试易

类似于QQ弹出信息(比如弹出个人的待办事宜等)

解决方案 »