Open form in a pop up window

So, I’m wondering what code I need to be looking at to learn how to open a form up in a new window. I’m referring to when a form pops up over the current page and the rest of the page is covered with a black transparent cover. I was looking at window.open(url) but I don’t think that’s the solution. Should I be trying to accomplish this in php or with javascript?

thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.BODY {
  height:30000px;
}

.parent {
  position:relative;left:100px;top:100px;width:510px;height:410px;
}

.content {
  position:relative;left:0px;top:0px;width:510px;
}

.div {
  width:100px;height:100px;border:solid red 1px;float:left;background-Color:#FFFFCC
}

#divM {
  overflow:hidden;width:510px;height:0px;float:left;background-Color:#FFFFCC;
}

.mask {
  z-Index:100;position:fixed;left:0px;top:0px;width:100%;height:100%;background-Color:#FFFFCC;
}

.form {
  position:absolute;overflow:hidden;left:300px;top:300px;z-Index:201;width:610px;height:400px;background-Color:#FFCC66;text-Align:center;
}
/*]]>*/
</style></head>

<body>
<input type="button" name="" value="Open Form" onmouseup="zxcPopUpForm.open('myform',true);"/>
<div class="mask1" ></div>
 <div id="myform" class="form" >
 <form >
  <br />
  <input name="" /><br />
  <input name="" /><br />
  <input name="" /><br />
  <input name="" /><br />
  <br />
  <br />
  <input type="button" name="" value="Close Form" onmouseup="zxcPopUpForm.open('myform',false);"/>

 </form>
</div>
<div style="height:3000px;" ></div>

<script type="text/javascript">
/*<![CDATA[*/

var zxcPopUpForm={

 init:function(o){
  var id=o.FormID,frm=document.getElementById(id),ms=o.AnimateDuration,msk=document.createElement('DIV'),opc=o.MaskOpacity;
  if (frm){
   msk.style.position='fixed';
   msk.className=o.MaskClass;
   msk.style.width='100%';
   msk.style.heigth='100%';
   msk.style.left='0px';
   msk.style.top='0px';
   document.body.appendChild(msk);
   msk.style.visibility='hidden';
   frm.style.position='fixed';
   frm.style.visibility='hidden';
   this['zxc'+id]={
    frm:frm,
    msk:msk,
    opc:typeof(opc)=='number'?opc:false,
    ms:typeof(ms)=='number'?ms:20
   };
   this.addevt(msk,'mouseup','open',id,false);
   this.addevt(window,'resize','resize',id);
  }
 },

 open:function(id,ud){
  var o=this['zxc'+id];
  if (o){
   this.resize(id);
   o.frm.style.visibility='visible';
   o.msk.style.visibility='visible';
   this.animate(o,o.frm,ud?0:100,ud?100:0,new Date(),o.ms,'dly2');
   if (o.opc){
    this.animate(o,o.msk,ud?0:o.opc,ud?o.opc:0,new Date(),o.ms,'dly0');
   }
  }
 },

 resize:function(id){
  var o=this['zxc'+id];
  if (o){
   var wwh=window.innerHeight?[window.innerWidth-10,window.innerHeight-10]:document.documentElement.clientHeight?[document.documentElement.clientWidth-10,document.documentElement.clientHeight-10]:[document.body.clientWidth,document.body.clientHeight];
   o.frm.style.left=(wwh[0]-o.frm.offsetWidth)/2+'px';
   o.frm.style.top=(wwh[1]-o.frm.offsetHeight)/2+'px';
  }
 },

 animate:function(o,obj,f,t,srt,mS,to){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f,p;
  if (isFinite(now)){
   obj.style.filter='alpha(opacity='+now+')';
   obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
  }
  if (ms<mS){
   o[to]=setTimeout(function(){ oop.animate(o,obj,f,t,srt,mS,to); },10);
  }
  else {
   if (t==0){
    obj.style.visibility='hidden';
   }
  }
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
 }


}

zxcPopUpForm.init({
 FormID:'myform',      // the unique ID name of the form.                 (string)
 MaskClass:'mask',     // the class name of the mask.                     (string)
 MaskOpacity:80,       //(optional) the opacity of the mask.              (number, default = no animated mask opacity)
 AnimateDuration:1000  //(optional) the animation speed in milli seconds. (number, default = 20)
});
/*]]>*/
</script></body>

</html>