关于在右下脚弹出窗口javascript代码,并用ASP.NET在后台调用(原创)

关于在右下脚弹出窗口javascript代码,并用ASP.NET在后台调用(原创)

/*
 构造函数,来初始化相应的属性
*/
function PopBubble(caption,content,see){ 
      
    this.content  = content;     
    this.caption= caption;     
    this.see= see;      
    this.width= 150;   
    this.height = 120;       
    this.timeout= 150;        
    this.speed    = 15;     
    this.step    = 2;    
    this.right    = screen.width -1; 
    this.bottom = screen.height;   
    this.left = this.right - this.width;  
    this.top= this.bottom - this.height;  
    this.timer    = 0;
    this.pause    = false;
    this.close    = false;
    this.autoHide    = true;

 
/* 
   退宿弹出窗口的方法 
 */ 
PopBubble.prototype.hide = function(){ 

 

        var offset  = this.height>this.bottom-this.top?this.height:this.bottom-this.top;
        var obj  = this; 
   
        if(this.timer>0){  
            window.clearInterval(obj.timer); 
        } 
 
        var fun = function(){ 
            if(obj.pause==false||obj.close){
                var x  = obj.left;
                var y  = 0;
                var width = obj.width;
                var height = 0;
    
                if(obj.offset>0){
                    height = obj.offset;
                }
                y  = obj.bottom - height;
                if(y>=obj.bottom){
                    window.clearInterval(obj.timer); 
                    obj.Pop.hide(); 
                } else {
                    obj.offset = obj.offset - obj.step; 
                }
                obj.Pop.show(x,y,width,height);   
            }            
        } 
   
        this.timer = window.setInterval(fun,this.speed)    

   

 
   


  
/*
    实现查看超链接  
   
 */ 
PopBubble.prototype.oncommand = function(){ 

 window.parent.mainFrame.location.href="notReaderMessage.aspx"; 
    this.close = true;
    this.hide(); 

 
/* 
     显示窗口中的div并弹出窗口方法
 */ 
PopBubble.prototype.show = function(){ 
   

    var oPopup = window.createPopup();   
    this.Pop = oPopup; 
    var w = this.width; 
    var h = this.height; 
 
    var str = "<DIV style='BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX: 99999; LEFT: 0px; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: " + w + "px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: " + h + "px; BACKGROUND-COLOR: #DAED9B'>" 
        str += "<TABLE style='BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid' cellSpacing=0 cellPadding=0 width='100%' bgColor=#EEF7CC border=0>" 
        str += "<TR>" 
        str += "<TD style='FONT-SIZE: 12px;COLOR: #0f2c8c' width=30 height=24></TD>" 
        str += "<TD style='PADDING-LEFT: 4px; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #1f336b; PADDING-TOP: 4px' vAlign=center width='100%'>" + this.caption + "</TD>" 
 
        str += "</TR>" 
        str += "<TR>" 
        str += "<TD style='PADDING-RIGHT: 1px;PADDING-BOTTOM: 1px' colSpan=2 height=" + (h-28) + ">" 
        str += "<DIV style='BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: #7AA14E 1px solid; PADDING-LEFT: 8px; FONT-SIZE: 12px; PADDING-BOTTOM: 8px; BORDER-LEFT: #7AA14E 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 8px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%'>" + this.content + "<BR><BR>" 
        str += "<DIV style='WORD-BREAK: break-all' align=left><A href='javascript:void(0)' hidefocus=true id='btCommand'><FONT color=#ff0000>" + this.see+"<embed id='soundControl' src='Windows.wav' mastersound hidden='true' loop='false' autostart='true'></embed>" + "</FONT></A></DIV>" 
        str += "</DIV>" 
        str += "</TD>" 
        str += "</TR>" 
        str += "</TABLE>" 
        str += "</DIV>" 
    oPopup.document.body.innerHTML = str;    
   
 
    this.offset  = 0;
    var obj  = this; 
    oPopup.document.body.onmouseover = function(){obj.pause=true;}
    oPopup.document.body.onmouseout = function(){obj.pause=false;}

    var fun = function(){   
        var x  = obj.left;
        var y  = 0;  
        var width    = obj.width;   
        var height    = obj.height;  
   
            if(obj.offset>obj.height){     
                height = obj.height;
            } else {   
                height = obj.offset;  
            }    
        y  = obj.bottom - obj.offset;
        if(y<=obj.top){
             obj.timeout--;
             if(obj.timeout==0){
                window.clearInterval(obj.timer); 
                if(obj.autoHide){
                    obj.hide();
                }
            }
        }
  else {
            obj.offset = obj.offset + obj.step;
        }
        obj.Pop.show(x,y,width,height);   
 
    } 
    this.timer = window.setInterval(fun,this.speed)     
    var btCommand = oPopup.document.getElementById("btCommand"); 
    btCommand.onclick = function(){ 
        obj.oncommand(); 
    }   
}  
 
PopBubble.prototype.rect = function(left,right,top,bottom){
    try {
        this.left= this.right-this.width;
        this.right=this.left +this.width;
        this.bottom  = screen.height;
        this.top = this.bottom - this.height;
    } catch(e){}
}

在后台VS2008下用ASP.NET下用ScriptManager.RegisterClientScriptBlock(UpdatePanel1, this.GetType(), "", "var msg = new PopBubble('短消息提示:','您有" + isRead + "封未读消息','查看'); msg.show();", true);

方式调用,完全成功,

测试图如下

 

图片

 非常完美。

posted @ 2012-05-25 18:26  prettyjun  阅读(246)  评论(0编辑  收藏  举报