Php文档 Php问答行业资讯 Php论坛 Php手册 Php博客

游戏榜单

软件榜单

关闭导航

热搜榜

热门下载

热门标签

关闭搜索

php爱好者> php文档>[转]Js + Css的msn式的popup提示窗口的实现 (转自..

[转]Js + Css的msn式的popup提示窗口的实现 (转自..

时间：2007-07-31 来源：傲枭

Msn的提示窗口非常经典，所以我们也做一个javascript实现一下，给大家逗乐用。

闲话不多说，Javascript代码如下：

只有javascript代码还是不够的，我们还需要css来定义样式：

DIV#eMsg{

}{

background-color: #c9d3f3;

border-left: #a6b4cf 1px solid;

border-right: #455690 1px solid;

border-top: #a6b4cf 1px solid;

border-bottom: #455690 1px solid;

visibility: hidden;

width: 199px;

97px;

position: absolute;

z-index: 99999;

left: 0px;

}

DIV#eMsg DIV.eMsgInner

{

}{

border-top: #ffffff 1px solid;

border-left: #ffffff 1px solid;

background-color:#cfdef4;

height:96px;

width:198px;

}

DIV#eMsgInner DIV.head{

}{width:197px}

DIV.headLeft{

}{width:30px;float:left;}

DIV.headMiddle{

}{

width:150px;

text-align:center;

float:left;

padding-top:2px;

color:green;

font-weight:bold

}

DIV.headRight{

}{width:16;float:left;}

DIV.headRight IMG{

}{

width:13px;

height:13px;

border:0px;

cursor:hand;

margin:2px;

}

DIV.body{

}{

height:82px;

clear:both;

border-right: #b9c9ef 1px solid;

padding: 13px;

padding-top: 1px;

border-top: #728eb8 1px solid;

border-left: #728eb8 1px solid;

color: #1f336b;

word-break: break-all;

border-bottom: #b9c9ef 1px solid;

}

DIV.light{

}{text-align:center;padding:5px 20px}

DIV.content{

}{text-align:center;height:65px;padding-top:10px}

以上是所有的实现代码，我们在使用时还需要做以下两步

1．我们需要在body标签的前面加上加载message的语句

document.write('<sc' + 'ript>' + 'eMsg.createInstance("月牙儿工作室提示","<div align=left>新增加了邮箱登录和地图查询两个模块欢迎您添加使用。</div>");');

document.write('</s')

document.write('cript>');

2．还需要在body的onload事件中添加eMsg.onLoad();

/**//*eMsg*/

var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,i = 0;

var eMsg = new Object();

eMsg.lightSrc = '../image/message/light.gif';

eMsg.closeSrc = '../image/message/msgclose.gif';

eMsg.id = 'eMsg';

eMsg.obj = function()

{return document.getElementById(eMsg.id);};

eMsg.onLoad = function()

{

try

{

divTop = parseInt(eMsg.obj().style.top,10);

divLeft = parseInt(eMsg.obj().style.left,10);

divHeight = parseInt(eMsg.obj().offsetHeight,10);

divWidth = parseInt(eMsg.obj().offsetWidth,10);

docWidth = document.body.clientWidth;

docHeight = document.body.clientHeight;

eMsg.obj().style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;

eMsg.obj().style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth;

eMsg.obj().style.visibility="visible";

eMsg.timer = window.setInterval(eMsg.move,1);

hp.skin.onBeforChange = function()

{

if(eMsg.obj())eMsg.obj().parentNode.removeChild(eMsg.obj());

};

}

catch(e)

{}

};

eMsg.onResize = function()

{

i+=1;

if(i>1000) eMsg.close();

try

{

divHeight = parseInt(eMsg.obj().offsetHeight,10);

divWidth = parseInt(eMsg.obj().offsetWidth,10);

docWidth = document.body.clientWidth;

docHeight = document.body.clientHeight;

eMsg.obj().style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10);

eMsg.obj().style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10);

}

catch(e)

{}

};

eMsg.move = function()

{

try

{

if(parseInt(eMsg.obj().style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))

{

window.clearInterval(eMsg.timer);

eMsg.timer = window.setInterval(eMsg.onResize,1);

}

divTop = parseInt(eMsg.obj().style.top,10);

eMsg.obj().style.top = divTop - 1;

}

catch(e)

{}

};

eMsg.close = function()

{

eMsg.obj().parentNode.removeChild(eMsg.obj());

if(eMsg.timer) window.clearInterval(eMsg.timer);

};

eMsg.createInstance = function(titleHtml,bodyHtml)

{

if(!titleHtml || !bodyHtml)throw '必须为titleHtml指定值,必须为bodyHtml指定值。';

var odiv = document.createElement('DIV');

odiv.id = eMsg.id;

odiv.innerHTML = '<div class="eMsgInner">'

+ '<div class="head">'

+ '<div class="headLeft"><img src="space.gif" height="1" width="1"/></div>'

+ '<div class="headMiddle">' + titleHtml + '</div>'

+ '<div class="headRight"><img src="' + eMsg.closeSrc + '" onclick="eMsg.close()" align="absmiddle"/></div>'

+ '</div>'

+ '<div class="body" oncontextmenu="eMsg.close();return false;" title="右键关闭">'

+ '<div class="light"><IMG src="' + eMsg.lightSrc + '"></div>'

+ '<div class="content">'

+ bodyHtml

+ '</div>'

+ '</div>';

document.body.appendChild(odiv);

};

window.onresize = eMsg.onResize;