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[*/
#prayer {
position:fixed;z-Index:101;left:-3000px;top:-3000px;width:400px;background-Color:#FFFFCC;padding: 5px;padding-Bottom: 25px;border:solid red 1px;
}
.title {
text-Align:center;font-Size:20px;margin-Bottom:10px;
}
.line {
text-Align:left;font-Size:14px;
}
.mask {
z-Index:10;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>
<form name="myform" >
<fieldset>
<h3>Step 1: Recognition</h3>
<strong>Create your own Recognition statement here:</strong><br />
<textarea rows="8" name="Recognition" cols="80">We begin every Spiritual</textarea><br />
<h3>Step 2: Unification</h3>
<strong>Create your own Unification statement here:</strong><br />
<textarea rows="8" name="Unification" cols="80">Create your own Unification</textarea><br />
<h3>Step 3: Realization</h3>
<strong>Create your own Realization statement here:</strong><br />
<textarea rows="8" name="Realization" cols="80">Create your own Realization</textarea><br />
<h3>Step 4: Thanksgiving</h3>
<strong>Create your own Thanksgiving statement here:</strong><br />
<textarea rows="8" name="Thanksgiving" cols="80">Create your own Thanksgiving sta</textarea><br />
<h3>Step 5: Release</h3>
<strong>Create your own Release statement here:</strong><br />
<textarea rows="8" name="Release" cols="80">Create your own Release statement here</textarea><br />
Wonderful! Now you have created your own 5-Step Spiritual Mind Treatment.
<p>To take a look at your affirmative prayer, click on the button below.</p>
<input type="button" value="Look At My Treatment" onmouseup="zxcPopUp.Show('prayer');">
</fieldset>
</form>
<div id="prayer" >
<div class="title" >My Prayer</div>
<div class="line" >line</div>
<div class="line" >line</div>
<div class="line" >line</div>
<div class="line" >line</div>
<div class="line" >line</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// PopUp (19-October-2013)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcPopUp={
Show:function(id){
var o=this['zxc'+id];
if (o){
clearTimeout(o.to);
var s=o.s[0],w=s.offsetWidth,h=s.offsetHeight,m=o.m==8?Math.floor(Math.random()*7):o.m;
if (this.o&&this.o!=o){
this.o.s[0].style.top='-3000px';
}
o.c=[[h/2,w/2,h/2,w/2],[0,w/2,h,w/2],[h/2,w,h/2,0],[0,0,h,0],[0,w,h,w],[0,w,0,0],[h,w,h,0],[0],[0,w,h,0]];
s.style.left=((o.mk.offsetLeft-s.offsetWidth)/2)+'px';
s.style.top=((o.mk.offsetTop-s.offsetHeight)/2)+'px';
if (!o.ud){
o.ud=true;
this.msk(o);
while (o.m==8&&m==o.lm){
m=Math.floor(Math.random()*7);
}
this.animate(o,o.s,m<7?o.c[m]:[0],m<7?o.c[8]:[100],m<7?4:1,new Date(),o.ms);
o.lm=m;
}
this.o=o;
typeof(o.OnChange)=='function'?o.OnChange(o.ud):null;
}
return false;
},
Hide:function(id,ms){
var oop=this,o=this['zxc'+id];
o?o.to=setTimeout(function(){ o.ud=false; typeof(o.OnChange)=='function'?o.OnChange(o.ud):null; oop.animate(o,o.s,o.lm<7?o.c[8]:[100],o.lm<7?o.c[o.lm]:[0],o.lm<7?4:1,new Date(),o.ms/2,false) },ms||500):null;
},
init:function(o){
var id=o.PopUpID,m=o.Mode,mc=o.MaskClass,ms=o.Animate,h=o.HideDelay,t=o.EventType,p=document.getElementById(id);
if (p&&!this['zxc'+id]){
var m=typeof(m)=='string'?m.charAt(0).toUpperCase():'F',msk=document.createElement('DIV'),mk=msk.cloneNode(false);
document.body.appendChild(p);
o.m='CHVRLDUF?'.indexOf(m);
o.id=id;
o.s=[p];
o.ms=isFinite(ms*1)&&ms>20?ms*1:1000;
o.h=isFinite(h*1)&&h>20?h*1:null;
o.t=t;
o.ud=false;
msk.style.position='fixed';
p.style.left=msk.style.left='0px';
p.style.top=msk.style.top='-3000px';
msk.style.width='100%';
msk.style.height='0px';
msk.className=mc;
o.msk=msk;
mc?document.body.appendChild(o.msk):null;
this['zxc'+id]=o;
this.addevt(p,'mouseup','Hide',id,100);
this.addevt(msk,'mouseup','Hide',id,100);
this.addevt(window,'resize','msk',o);
mk.style.position='fixed';
mk.style.bottom=mk.style.right='0px';
mk.style.width=mk.style.height='0px';
document.body.appendChild(mk);
o.mk=mk;
}
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
msk:function(o){
o.msk.style.top=(o.ud?0:-3000)+'px';
o.msk.style.height=(o.ud?o.mk.offsetTop:0)+'px';
},
animate:function(o,a,f,t,l,srt,mS,ud){
clearTimeout(a[5]);
var oop=this,ms=new Date()-srt,n=[],z0=0;
for (;z0<l;z0++){
n[z0]=(t[z0]-f[z0])/mS*ms+f[z0];
n[z0]=isFinite(n[z0])?Math.floor(Math.max(n[z0],0)):f[z0];
}
l==1?oop.opac(a[0],n[0]):oop.clip(a[0],n);
if (ms<mS){
a[5]=setTimeout(function(){ oop.animate(o,a,f,t,l,srt,mS,ud); },10);
}
else {
l==1?oop.opac(a[0],t[0]):oop.clip(a[0],t);
o.ud&&o.h?this.Hide(o.id,o.h):null;
if (ud===false){
oop.msk(o);
a[0].style.top='-3000px';
}
}
},
opac:function(o,n){
o.style.filter='alpha(opacity='+n+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
},
clip:function(o,t){
o.style.clip='rect('+t[0]+'px,'+t[1]+'px,'+t[2]+'px,'+t[3]+'px)';
},
mse:function(e){
var ds=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
return window.event?[e.clientX+ds[0],e.clientY+ds[1]]:[e.pageX,e.pageY];
},
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:'prayer', // the unique ID name of the pop up DIV. (string)
Mode:'C', //(optional) the display mode(see Note 1). (string, default = 'F' = fade)
Animate:1000, //(optional) the animation duration in milli seconds. (number, default = 1000)
HideDelay:5000, //(optional) the hide delay in milli seconds. (number, default = 1000)
MaskClass:'mask', //(optional) the class name of the 'mask'(see Note 2). (string, default = no mask)
OnChange:function(ud){ //(optional) a function to call on show/hide. (function, default = no function)
var clds=document.getElementById('prayer').childNodes,ary=[],as=document.forms['myform'].getElementsByTagName('TEXTAREA'),z0=0,z1=0;
for (var z0=0;z0<clds.length;z0++){
if ((' '+clds[z0].className+' ').match(' line ')){
ary.push(clds[z0]);
}
}
for (;z1<as.length;z1++){
if (ary[z1]){
ary[z1].innerHTML=as[z1].value;
}
}
}
});
/*
** Note 1.
The display modes are:
'C' = center clip,
'H' = horizontal clip,
'V' = vertical clip,
'R' = right clip,
'L' = left clip,
'D' = down clip,
'U' = up clip,
'F' = fade,
'?' = Random Clip
** Note 2.
Where the MaskClass is specified a 'mask' will cover the window.
The mask class CSS rule must specify a z-Index so the mask is over all page elements other than the pop up.
The script will assign a CSS position of fixed to the mask and control the size and positioning.
Clicking the mask will hide tht pop up.
*/
/*]]>*/
</script>
</body>
</html>
Bookmarks