SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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!

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!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>


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •