【IT168技术文档】
MSN弹出式消息提示是一直想实现的效果,但苦于不知道如何计算DIV标签在页面上具体位移和搞不清DIV标签层定位原理,导致一直都没有实现MSN弹出式消息提示效果。
MSN弹出式消息提示效果图(A-01):

前些日子,通过赵玉开发表一篇关于“Js + Css的msn式的popup提示窗口的实现” 文章(原文地址:赵玉开博客)后,给了我实现上的启发,并他实现的基础上拓展新功能:增加最大化窗口和最小化窗口切换。在效果图上可以看到是用“-”号(最小化窗口)表示。
闲话不多说了,实现脚本如下:
以上的JS代码,只需要嵌入到HTML文件上,就可以大功告成了。显示效果如A-01图所示。<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 popupMessagePopup(bodyHtml) { popupMessage.createInstance(bodyHtml); popupMessage.onLoad(); } popupMessage.convertWin = function(){ var msg = document.getElementById('msgContent'); var contentdis = document.getElementById('btContent'); var flg = msg.style.display=="none"; if(flg) { contentdis.innerHTML = '—'; contentdis.title='最小化窗口'; msg.style.display = "block"; } else { contentdis.innerHTML = '□'; contentdis.title='最大化窗口'; msg.style.display = "none"; } } 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://seeker.cnblogs.com/" target ="_blank" style="font-size:15px; color:Red;">欢迎您访问Seeker博客</a> </div>'+ '</div>'); } window.onload = myPopup; </script>
引用到学习资源:
1: 层定位原理
2: 利用JS来开发属于自己的js对象(createElement对象)