Need help - Generate popup window using javascript

**satyaK** · 07-18-2015, 03:32 PM

Hello Friends,

i am having hard time generating popup window in my project, using javascript. Can anyone help in this regarding??
Thanks in advance.

**vwphillips** · 07-18-2015, 03:58 PM

you need to define the requirement.

ie

what is to be displayed in the popup

how is it to be activated

where is it to be positioned

etc

**satyaK** · 07-18-2015, 04:05 PM

Originally Posted by vwphillips

you need to define the requirement.

ie

what is to be displayed in the popup

how is it to be activated

where is it to be positioned

etc

Can you provide an example?? I have content that goes in the popup, and a button to click.

**styxlawyer** · 07-18-2015, 04:58 PM

Originally Posted by satyaK

Can you provide an example?? I have content that goes in the popup, and a button to click.

Ah, a homework project. Google Is Your Friend.

**molendijk** · 07-18-2015, 07:37 PM

I made a popup script some time ago. Here it is. The links on the page are the demos.

**vwphillips** · 07-19-2015, 01:14 PM

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[*/

#popup1 {
  position:fixed;z-Index:101;visibility:hidden;width:200px;height:200px;background-Color:#FFCC66;
}

#popup2 {
  position:fixed;z-Index:101;visibility:hidden;width:200px;height:400px;background-Color:red;
}

.mask { /* CSS for the background mask */
 position:fixed;z-Index:100;width:100%;height:100%;left:0px;top:0px;background-Color:#FFCC66;
/* Moz */
  opacity: .5;
/* IE5-7 */
  filter: alpha(opacity=50);
/* IE8 */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

/*]]>*/
</style></head>

<body>

<input type="button" name="" value="Open 1" onclick="zxcPopUp.Open('popup1',true);" />
<input type="button" name="" value="Open 2" onclick="zxcPopUp.Open('popup2',true);" />
<input type="button" name="" value="Close 2" onclick="zxcPopUp.Open('popup2',false);" />
<div id="popup1" >
 <input type="button" name="" value="Close" onclick="zxcPopUp.Open('popup1',false);" />
 Your HTML code Goes Here
 </div>
<div id="popup2" >
 Your HTML code Goes Here
</div>

<script type="text/javascript">
/*<![CDATA[*/
// Simple PopUp (19-July-2015)
//by: Vic Phillips - http://www.vicsjavascripts.org/

var zxcPopUp={

 Open:function(id,ud){
  var o=this['zxc'+id],lst=this.lst;
  if (o){
   if  (ud===true&&lst!=o&&lst.pop.style.visibility=='visible'){
    this.animate(lst,lst.a,lst.a[2],lst.a[1],new Date(),lst.ms/2,false,o);
   }
   else {
    this.animate(o,o.a,o.a[2],o.a[ud===true?0:1],new Date(),o.ms,ud)
    ud===true?o.pop.style.visibility=o.msk.style.visibility='visible':null;
    this.resize(o);
    this.lst=o;
   }
  }
 },

 Init:function(o){
  var id=o.PopUpID,c=o.MaskClass,ms=o.Animate,pop=document.getElementById(id);
  if (pop){
   var mk=document.createElement('DIV'),w=pop.offsetWidth,h=pop.offsetHeight,msk;
   mk.style.position='fixed';
   msk=mk.cloneNode(false);
   msk.style.left=msk.style.top=mk.style.width=mk.style.height=mk.style.right=mk.style.bottom='0px';
   document.body.appendChild(mk);
   msk.className=c;
   msk.style.width='100%';
   typeof(c)=='string'?document.body.appendChild(msk):null;
   pop.style.visibility=msk.style.visibility='hidden';
   o.id=id;
   o.pop=pop;
   o.a=[[0,w,h,0],[h/2,w/2,h/2,w/2],[h/2,w/2,h/2,w/2]];
   o.msk=msk
   o.mk=mk;
   o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
   this.addevt(msk,'click','Open',id,false);
   this['zxc'+id]=this.lst=o;
   this.resize(o);
   this.addevt(window,'resize','resize',o);
  }
 },

 animate:function(o,a,f,t,srt,mS,ud,nxt){
  clearTimeout(a[3]);
  var oop=this,ms=new Date().getTime()-srt,n=[],z0=0;
  for (;z0<f.length;z0++){
   n[z0]=Math.max((t[z0]-f[z0])/mS*ms+f[z0],0);
  }
  oop.clip(o,n);
  if (ms<mS){
   a[3]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,ud,nxt); },10);
  }
  else {
   oop.clip(o,t);
   ud!==true?o.pop.style.visibility=o.msk.style.visibility='hidden':null;
   nxt?oop.Open(nxt.id,true):null;
  }
 },

 clip:function(o,n){
  if (isFinite(n[0])&&isFinite(n[1])&&isFinite(n[2])&&isFinite(n[3])){
   o.a[2]=n;
   o.pop.style.clip='rect('+Math.ceil(n[0])+'px,'+Math.ceil(n[1])+'px,'+Math.ceil(n[2])+'px,'+Math.ceil(n[3])+'px)';
  }
 },

 resize:function(o){
  o.pop.style.left=(o.mk.offsetLeft-o.pop.offsetWidth)/2+'px'
  o.pop.style.top=(o.mk.offsetTop-o.pop.offsetHeight)/2+'px'
  o.msk.style.height=o.mk.offsetTop+'px';
 },

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

}


zxcPopUp.Init({
 PopUpID:'popup1', // the unique ID name of the PopUp.                   (string)
 MaskClass:'mask', //(optional) the class name of the PopUp mask.        (string, default - no mask)
 Animate:1000      //(optional) the animation duration in milli seconds. (number, default - 1000)
});

zxcPopUp.Init({
 PopUpID:'popup2'
});

/*]]>*/
</script>
</body>

</html>

Thread: Need help - Generate popup window using javascript

Thread Tools

Search Thread

Need help - Generate popup window using javascript

Similar Threads

Javascript Passing value from a popup window to its parent window

Mastering popup window using javascript

Javascript popup window help

Javascript Help with Popup window

Center Popup Window without Javascript?

Bookmarks

Bookmarks

Posting Permissions