ajax javascript 弹出框

demo 下载： http://www.blogjava.net/Files/Good-Game/div_.rar
运行 div.html


html:

< html >
< head >
< script  type ="text/javascript"  src ="prototype.js" ></ script >
< script  type ="text/javascript"  src ="drag.js" ></ script >
< META  http-equiv =Content-Type  content ="text/html; charset=utf8" >
</ head >

< body >
< a
     onclick ="getDrag(event,
                     'ajax.html?id=5',
                     'position:absolute;display:none;left:50;  top:10;  z-index:1000;  padding:0px;  background-color:#FFFFCC;  color:#201000;  font-size:12px;  border:5px   solid   #284860;',
                      'background-color:#CCFFCC;')" > 测试使用（请点击）
</ a >
</ body >
</ html >

js.

//  参考 ： http://hi.baidu.com/foxlively/blog/item/0ce341b3f0c050a2d8335af8.html
//  使用 ： prototype.js 
// 使用方法 
var  _div1  =   null ;
var  _style2  =   null ;

function  getDrag(event, url,divId, style1, style2) {
    
     if  (style2)
        _style2  =  style2;
     else
        _style2  =   "" ;
    
     if (divId == null )
        _div1  =  document.createElement( " div " );
     else
        _div1  =  document.getElementById(divId);
    
    _div1.style.position  =  'absolute';
    _div1.style.display  =  'none';

     if  (_div1.style.border  ==   null   ||  _div1.style.border  ==  '')
        _div1.style.border  =  '1px solid # 284860 ';

     if  (style1)
        _div1.setAttribute('style', style1);
    actionAjax(url);
    document.body.appendChild(_div1);
    showByEvent(event, _div1);
}


function  getActionName(url) {
     var  question  =  url.indexOf( " ? " );
     if  (question  >   0 ) {
         return  url.substring( 0 , question);
    }
     else  {
         return  url;
    }
}

function  getActionPars(url) {
     var  question  =  url.indexOf( " ? " );
     if  (question  >   0 ) {
         return  url.substring(question + 1 , url.length);
    }
     else  {
         var  d  =   new  Date();
         var  t  =  d.getTime();
         return   " timestamp= " + t;
    }
}


function  actionAjax(url) {
     var  urls  =  getActionName(url);
     var  pars  =  getActionPars(url);
     var  myAjax  =   new  Ajax.Updater(_div1, urls, {
        method :'post',
        parameters :pars,
        onComplete :_action
    });
}

function  _action(req) {
     var  varhtml  =   " <div id=\ " _drag_div\ "  style=\ ""
            + _style2
            +  " \ "  align=\ " right\ " ><br/><a href=\ " javascript:;\ "  onclick=\ " this .parentNode.parentNode.style.display = 'none'; this .parentNode.parentNode.innerHTML = null ;\ " >[关闭]</a></div> "
             +  req.responseText
             + " <div id=\ " _drag_div\ "  style=\ ""
            + _style2
            +  " \ "  align=\ " left\ " ><br/><a href=\ " javascript:;\ "  onclick=\ " this .parentNode.parentNode.style.display = 'none'; this .parentNode.parentNode.innerHTML = null ;\ " >[关闭]</a></div> "
            ;
     // varhtml =  varhtml.replace(/form[ ]+action=["'](.*)["']/gi, "form action=\"javascript:actionAjax('$1');\" ")  ;
                              
    _div1.innerHTML  =  varhtml;
     var  drag  =   new  Drag();
     //  drag.build(div1);//拖动本身
    drag.build(_div1, _div1.firstChild); //  通过一个对象拖动另一个对象
     // drag.build(_div1, _div1.lastChild);// 通过一个对象拖动另一个对象
}


function  showByEvent(event, useDiv) {
    useDiv.style.display  =   "" ;
    useDiv.style.left  =  mouseX(event);
    useDiv.style.top  =  mouseY(event);
}


function  mouseX(ev) {
     if ( ev  ==   null  )ev  =  event  ||  window.event ;
     if (ev.clientX){
         return  ev.clientX  +  document.body.scrollLeft  -  document.body.clientLeft;
    } else   if (ev.pageX){
         return  ev.pageX;
    }
}
function  mouseY(ev) {
     if ( ev  ==   null  )ev  =  event  ||  window.event ;
     if (ev.clientY){
         return  ev.clientY  +  document.body.scrollTop  -  document.body.clientTop ;
    } else   if (ev.pageX){
         return  ev.pageY;
    }
}

function  Drag() {
}
Drag.prototype.baseX  =   0 ;
Drag.prototype.baseY  =   0 ;
Drag.prototype.lastX  =   0 ;
Drag.prototype.lastY  =   0 ;
Drag.prototype.nowX  =   0 ;
Drag.prototype.nowY  =   0 ;
Drag.prototype.obD  =   null ;
Drag.prototype.obM  =   null ;
Drag.prototype.build  =   function (_obD, _obM) {
     if  (_obM) {
        Drag.prototype.obM  =  _obM;
    }  else  {
        Drag.prototype.obM  =  _obD;
    }
    Drag.prototype.obD  =  _obD;
    Drag.prototype.obM.onmousedown  =   function (event) {
        Drag.prototype.lastX  =  mouseX(event);
        Drag.prototype.lastY  =  mouseY(event);
        Drag.prototype.baseX  =  Drag.prototype.obD.style.left;
        Drag.prototype.baseY  =  Drag.prototype.obD.style.top;
         this .onmousemove  =   function (event) {
            Drag.prototype.nowX  =  mouseX(event);
            Drag.prototype.nowY  =  mouseY(event);
            Drag.prototype.obD.style.left  =  (parseFloat(Drag.prototype.baseX)
                     +  Drag.prototype.nowX  -  Drag.prototype.lastX)
                     +   " px " ;
            Drag.prototype.obD.style.top  =  (parseFloat(Drag.prototype.baseY)
                     +  Drag.prototype.nowY  -  Drag.prototype.lastY)
                     +   " px " ;
        }
    }
    Drag.prototype.obM.onmouseup  =   function (event) {
         //  obD.onmouseup = null;
        Drag.prototype.obD.onmousemove  =   null ;
        Drag.prototype.obM.onmousemove  =   null ;
    }
    Drag.prototype.obM.onmouseout  =   function () {
         //  obM.onmouseup = null
        Drag.prototype.obM.onmousemove  =   null ;
        Drag.prototype.obD.onmousemove  =   null ;
    }
}