<!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>