老裴帮助关于右下角消息提示框的小练习2

最新推荐文章于 2026-06-23 18:20:34 发布

原创最新推荐文章于 2026-06-23 18:20:34 发布 · 143 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#JavaScript #HTML #.net #ViewUI

本文介绍了一种使用JavaScript实现在网页右下角显示信息提示框的方法。通过创建可定制的弹窗，该脚本能够根据页面滚动位置调整提示框的位置，并支持最小化和关闭功能。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>右下角信息提示 </TITLE>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta http-equiv="content-cathe" content="nocatche">
</HEAD>

<BODY>
<script language="javascript">
var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,i = 0;
var popupMessage = new Object();
popupMessage.id = 'popupMessage';
popupMessage.obj = function(){
return document.getElementById(popupMessage.id);
};
popupMessage.onLoad = function(){
    try{
        divTop = parseInt(popupMessage.obj().style.top,10);
        divLeft = parseInt(popupMessage.obj().style.left,10);
        divHeight = parseInt(popupMessage.obj().offsetHeight,10);
        divWidth = parseInt(popupMessage.obj().offsetWidth,10);
        docWidth = document.body.clientWidth;
        docHeight = document.body.clientHeight;

        popupMessage.obj().style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;
        popupMessage.obj().style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth;
        popupMessage.obj().style.visibility="visible";
        popupMessage.timer = window.setInterval(popupMessage.move,2);

    }
    catch(e){}
};
popupMessage.onResize = function(){
    i+=1;
    //if(i>1000) popupMessage.close();
    try{
        divHeight = parseInt(popupMessage.obj().offsetHeight,10);
        divWidth = parseInt(popupMessage.obj().offsetWidth,10);
        docWidth = document.body.clientWidth;
        docHeight = document.body.clientHeight;
        popupMessage.obj().style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10);
        popupMessage.obj().style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10);
    }
    catch(e){}
};
popupMessage.move = function(){
    try
    {
        if(parseInt(popupMessage.obj().style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))
        {
            window.clearInterval(popupMessage.timer);
            popupMessage.timer = window.setInterval(popupMessage.onResize,1);
        }
        divTop = parseInt(popupMessage.obj().style.top,10);
        popupMessage.obj().style.top = divTop - 1;
    }
    catch(e){}
};
popupMessage.close = function(){
    if(popupMessage.obj()) popupMessage.obj().parentNode.removeChild(popupMessage.obj());
    if(popupMessage.timer) window.clearInterval(popupMessage.timer);
};
popupMessage.createInstance = function(bodyHtml){
try
{
    if(popupMessage.obj())popupMessage.obj().parentNode.removeChild(popupMessage.obj());
    if(popupMessage.timer) window.clearInterval(popupMessage.timer);
    i=0;
    var odiv = document.createElement('DIV');
    odiv.id = popupMessage.id;
    odiv.style.width="199px";
    odiv.style.height="auto";
    odiv.style.visibility="hidden";
    odiv.style.position="absolute";
    odiv.style.zIndex="99999";
    odiv.style.left="0px";

    odiv.innerHTML = bodyHtml;
    document.body.appendChild(odiv);

}
catch(e){}
};

window.onresize = popupMessage.onResize;

function myPopup()
{
popupMessagePopup('<div style="width:199px; height:auto;font-size:12px;border:solid 1px #3399FF;background-color:#CFDEF4; ">'+
     '<div style="width:199px;height:20px; float:left; ">'+
       '<span style="width:140px;float:left;text-align:left;text-indent:8px;padding:4px; color:#0C53C5;">消息提示</span>'+
       '<span title="关闭" style="width:15px;border-width:0px;float:right;margin-right:5px;padding:4px; color:Red; cursor: hand; font-weight:bold;" onclick="popupMessage.close();return false;">×</span>'+
       '<span id="btContent" title="最小化窗口" style="width:15px;border-width:0px;float:right;padding:4px 4px 4px 4px; margin-right:7px;color:Red;cursor: hand;font-weight:bold;" onclick="popupMessage.convertWin();">—</span>'+
     '</div>'+
     '<div id="msgContent" style="width:199px;height:60px; float:left;WORD-BREAK: break-all; padding:8px 8px 8px 8px;border-top:solid 1px #3399FF; text-align:left; text-indent:10px; "><a href="http://phf123456-yeah-net.iteye.com/admin/blogs/" target="_blank" style="font-size:15px; color:Red;">欢迎您访问老裴博客</a></div>'+
'</div>');
}

window.onload = myPopup;

</script>
</BODY>
</HTML>