Js + Css的msn式的popup提示窗口的实现 (转自:月牙儿)

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

 

闲话不多说,Javascript代码如下:


/*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>'
    
+ '</div>';
    document.body.appendChild(odiv);
}
;

window.onresize 
= eMsg.onResize;

 

只有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; 
    height
: 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.还需要在bodyonload事件中添加eMsg.onLoad();

posted @ 2007-04-26 20:43  chinaifne  阅读(284)  评论(0编辑  收藏