PDA

View Full Version : 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
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
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. (http://www.google.com/cse?q=javascript%20popup%20window&sa=Search&cx=011444277870222434136:sj9mvdxmv2s#gsc.tab=0&gsc.q=javascript%20popup%20window&gsc.page=1)

molendijk
07-18-2015, 07:37 PM
I made a popup script some time ago. Here (http://mesdomaines.nu/eendracht/window_open_of_tab_allerbest2/pop_it_up.html) it is. The links on the page are the demos.

vwphillips
07-19-2015, 01:14 PM
<!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>