本帖最后由 xkmmrs 于 2011-04-18 11:33:50 编辑

解决方案 »

  1.   

    function PopUp(id, config){
    this.id=id;
    var c = this.config = config;
    c.width = $gv(c.width,300);
    c.height = $gv(c.height,200);
    c.bottom = $gv(c.bottom,0);
    c.right = $gv(c.right,20);
    c.display = $gv(c.display,true);
    c.contentUrl= $gv(c.contentUrl,"");
    c.motionFunc= $gv(c.motionFunc,$motion.smooth);
    c.position = {x:0,y:0};
    var t=c.time;
    t.slideIn = $gv(t.slideIn,10);
    t.hold   = $gv(t.hold,10);
    t.slideOut = $gv(t.slideOut,10);
    t.slideIn *= 1000;
    t.hold   *= 1000;
    t.slideOut *= 1000;
    this.container = document.body;
    this.popup = null;
    this.content = null;
    this.switchButton = null;
    this.moveTargetPosition = 0;
    this.startMoveTime = null;
    this.startPosition = null;
    this.status = PopUp.STOP;
    this.intervalHandle = null;
    this.mm = "max";
    this.imgMin = "";
    this.imgMax = "";
    }
    //static members
    PopUp.STOP = 0;
    PopUp.MOVE_DOWN = 1;
    PopUp.MOVE_UP = 2;
    PopUp.SWITCH_TO_MIN = PopUp.MOVE_DOWN | 4;
    PopUp.SWITCH_TO_MAX = PopUp.MOVE_UP | 8;
    var __o={
    create : function (){
       var doc=document;
       var c=this.config;
       //create popup holder & config it.
       var p = this.popup = doc.createElement("div");
       this.container.appendChild(p);
       p.id=this.id;
       p.style.cssText="position:absolute;       z-index:9000;       overflow:hidden;       border:0px solid #f00;       ";
       $dom.setSize(p, c.width, c.height);
       //create popup content holder & config it.
       var t = this.content = doc.createElement("div");
       p.appendChild(t);
       t.id = this.id+"_content";
       t.style.cssText="position:absolute;       z-index:1;       overflow:hidden;";
       $dom.setSize(t, c.width, c.height);
       $dom.setPosition(t,0,0);//add
       c.position.y = c.height;//add
       this.onresize();//add
       //$dom.setPosition(t, 0, c.height);//hide it at first
       // create content holder's content.
       // a close button & an iframe for loading external content.
       t.innerHTML = "<a id='closeButton' href='#'></a>"+
              "<a id='switchButton' href='#'></a>"+
               "<iframe id='"+this.id+"_content_iframe' src="+c.contentUrl+" frameborder=0 scrolling=no width='100%' height='100%' style='height:100%'></iframe>";
       var sBtn = this.switchButton = $_t(t,'a',"switchButton");
       sBtn.style.cssText='position:absolute;        z-index:2;                font-size:0px;        line-height:0px;                left:255px;        top:21px;        width:15px;        height:15px;                background-image:url("http://www.sgnet.cc/tupian/small/small.gif");';
       $addEL(sBtn,"click",$dele(this,"switchMode"),true);
       $addEL(sBtn,"click",$cancelEvent,true);
       var btn = $_t(t,'a',"closeButton");
       btn.style.cssText='position:absolute;        z-index:2;                font-size:0px;        line-height:0px;                left:275px;        top:21px;        width:15px;        height:15px;                background-image:url("http://www.sgnet.cc/tupian/small/close.gif");';
       $addEL(btn,"mouseover",function (e){
               $dom.setAlpha(this,0.4);
               },true);
       $addEL(btn,"mouseout",function (e){
               $dom.setAlpha(this,1);
               },true);
       $addEL(btn,"click",$dele(this,"hide"),true);
       $addEL(btn,"click",$cancelEvent,true);
       var container=$IE ? document.body : document.documentElement;
       $addEL(document.body,"resize",$dele(this,"onresize"),true);
        this.__hackTimer=window.setInterval("__popup.onresize()",50);
       $addEL(container,"scroll",$dele(this,"onresize"),true);
       //initialize position at once.
       this.onresize();
    },
    show : function (){
       if (!this.config.display) return;
       this.moveTargetPosition = 0;
       this.status = PopUp.MOVE_UP;
       this.startMove();
    },
    hide : function (){
       this.moveTargetPosition = this.config.height;
       this.status = PopUp.MOVE_DOWN;
       this.startMove();
    },
    minimize : function (){
       //alert("minimize");
       this.mm = "min";
       this.moveTargetPosition = this.config.height - 38;
       this.status = PopUp.SWITCH_TO_MIN;
       this.startMove();
       var s = this.switchButton.style;
       var bg = s.backgroundImage;
       if (bg.indexOf(this.imgMin) > -1) {
        bg = bg.replace(this.imgMin,this.imgMax);
        s.backgroundImage = bg;
       }
    },
    maximize : function (){
       //alert("maximize");
       if (!this.config.display) return;
       this.mm = "max";
       this.moveTargetPosition = 0;
       this.status = PopUp.SWITCH_TO_MAX;
       this.startMove();
       var s = this.switchButton.style;
       var bg = s.backgroundImage;
       if (bg.indexOf(this.imgMax) > -1) {
        bg = bg.replace(this.imgMax,this.imgMin);
        s.backgroundImage = bg;
       }
    },
    delayHide : function (){
       window.setTimeout("__popup.hide()",this.config.time.hold);
    },
    delayMin : function (){
       window.setTimeout("__popup.minimize()",this.config.time.hold);
    },
    switchMode : function (){
       //alert("switch");
       if (this.mm == "min"){
        this.maximize();
       } else {
        this.minimize();
       }
    },
    startMove : function (){
       this.stopMove();
       this.intervalHandle = window.setInterval("__popup.move()",100);
       this.startMoveTime = new Date().getTime();
       //this.startPosition = $dom.getPosition(this.content).y;//parseInt(this.content.style.top);
       this.startPosition = this.config.position.y;
    },
    stopMove : function (){
       if (this.intervalHandle != null) window.clearInterval(this.intervalHandle);
       this.intervalHandle = null;
    },
    move : function (){
       var t = new Date().getTime();
       t = t - this.startMoveTime;
       var total = this.status & PopUp.MOVE_UP ?
          this.config.time.slideIn :
          this.config.time.slideOut;
       var y = this.config.motionFunc(this.startPosition, this.moveTargetPosition, t/total);
       //this.content.style.top = y + "px";
       this.config.position.y = y;
       this.onresize();
       if (t >= total){
        this.onFinishMove();
       }
    },
    onFinishMove : function (){
       this.stopMove();
       //this.content.style.top = this.moveTargetPosition + "px";
       if (this.status == PopUp.MOVE_UP && this.config.time.hold > 0 ){
        this.delayMin();
       } else {
        if (this.__hackTimer!=null) window.clearInterval(this.__hackTimer);
       }
       this.status = PopUp.STOP;
    },
    onresize : function (){
       var c=this.config;
       //var t=document.documentElement;
       var t=document.body;
       var dx=t.clientWidth + t.scrollLeft;
       var dy=t.clientHeight + t.scrollTop;
       var x = dx - c.right - c.width ;
       var y = dy - c.bottom - c.height + c.position.y;
       $dom.setPosition(this.popup, x, y);
       $dom.setSize(this.popup, c.width, c.height-c.position.y);
    }
    }
    $cpAttr(PopUp.prototype,__o);
    /*---------------------------------------*/
    function readCookie(name)
    {
    var cookieValue = "";
    var search = name + "=";
    if(document.cookie.length > 0)
    {
        offset = document.cookie.indexOf(search);
        if (offset != -1)
        {
          offset += search.length;
          end = document.cookie.indexOf(";", offset);
          if (end == -1) end = document.cookie.length;
          cookieValue = unescape(document.cookie.substring(offset, end))
        }
    }
    return cookieValue;
    }
    function writeCookie(name, value, hours)
    {
    var expire = "";
    if(hours != null)
    {
        expire = new Date((new Date()).getTime() + hours * 3600000);
        expire = "; expires=" + expire.toGMTString();
    }
    document.cookie = name + "=" + escape(value) + expire + ";path=/";
    }
    /*
    * main function to config the pop-up window & run it.
    * web deployer change codes here to manipulte popups performance.
    * & should not change codes out of this function.
    */
    function job(){
    /*
    * config object
    */
    var cfg={
       //width & height of the popup window ,these values should be determined debpended on inner contents.
       width     : 300,
       height     : 200,
       //distance to the bottom & the right edge.
       bottom    : 0,
       right    : 0,
       //switch of displaying the popup
       display    : true,
       //content url
       contentUrl   : "http://www.sgnet.cc/news/node_23.htm",
       //time configuration,in seconds
       time : {
        slideIn    : 1,
        hold     : 60,
        slideOut   : 1
       }
    }
    //at what time the popup should display,in hours : 0~23,
    //the number after add symbol means after how many the hours to display popup for the next time.
    var displayTimeList = ["7+7"];
    // the popup displays each time thie page reload or only once at the first time page loaded.
    // once / eachTime
    //var displayMode = "once";
    var displayMode = "eachTime";
    //cookie name storing the next time to display popup
    var cookieName="sina_blog_popup_next_display_time";
    /*
    * --------------------- from here below, the codes should NOT be modified.
    */
    var hours={};
    var delays=[];
    for (var i=0;i<displayTimeList.length;i++) {
       var o = displayTimeList[i];
       var ar = o.split("+");
       var t = parseInt(ar[0]);
       for (var m=0;m<ar.length-1;m++){
          ar[m]=ar[m+1];
       }
       hours[t]=true;
       for (var j=0;j<ar.length;j++){
        hours[t + parseInt(ar[j])]=true;
       }
    }
    displayTimeList=[];
    for (var i in hours){
       var s = parseInt(i);
       if (isNaN(s)) continue;
       displayTimeList[displayTimeList.length]=s;
    }
    displayTimeList = displayTimeList.sort();
    //alert(displayTimeList);
    var pp = new PopUp("xp", cfg);
    window.__popup=pp;
    pp.create();
    //display:
      

  2.   


    var n=readCookie(cookieName);
    if (displayMode=="eachTime")
       pp.show();
    else {
       var tm=new Date().getTime();
       if (n==null || tm>n) {
        pp.show();
        //get next display time
        var hr=new Date().getHours();
        var f = 60*60*1000;
        var l = displayTimeList.concat(), len = l.length;
        for (var i = 0; i < len; i++) l[len + i] = l[i] + 24;
        for (var i = 0; i < l.length && hr >= l[i]; i++);
        var dt = new Date();
        dt.setHours(l[i] > 23 ? l[i] - 24 : l[i]);
        var nextTime = dt.getTime();
        if (l[i] > 23) nextTime += f * 24 ;
        writeCookie(cookieName, nextTime, 24);
       }
    }
    }
    function doit(){
    if(document.readyState == 'loaded' || document.readyState == 'complete'){
       job();
    }else{
    window.setTimeout(doit,500);
       return;
       }
    }
    doit();
    </script>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </body>
    </html>
      

  3.   


    代码太长,俺直接挂到网上了,
    正常的 http://www.sgnet.cc/tupian/small/4.0.htm
    doctype声明为: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    不正常的 http://www.sgnet.cc/tupian/small/4.01.htm
    doctype声明为:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
      

  4.   

    太长了,只能大致看下,呵呵。你试试把有关弹窗的定位坐标部分(left,top)找出来,然后加上+"px"
    例如:
    弹窗.style.left=300+'px';
    弹窗.style.top=300+'px';
      

  5.   

    看到了,你已经加了:
    setPosition : function (elmt,x,y,withMargin){
       //tf("$dom::setPosition");
       if (withMargin){
        //var m=this.getMargin(elmt);
        //x-=m.l;
        //y-=m.t;
       }
       elmt.style.left=x+"px";
       elmt.style.top=y+"px";
    },
    --------------------
    你在firebug下跟踪一下上面的x,y的变化吧
      

  6.   

    将这两行
    //var t=document.documentElement;
       var t=document.body;
    代码换成下面的就可以了var t=document.compatMode=="CSS1Compat" ? document.documentElement : document.body;ps:这个代码也太复杂了吧,可以看看我以前写的这个http://blog.csdn.net/sohighthesky/archive/2009/11/10/4795886.aspx布局那里页面可以自己改
      

  7.   

    已解决,感谢 sohighthesky、toury