https://www.sunflowers.sk/javascript/kvazi_pop_up.js

1// trieda KvaziPopUp
2	// konstruktor
3	function KvaziPopUp(pRodic, textZatvor, width)
4	{
5			// rodic a jeho dokument
6			this.rodic = pRodic;
7            this.dokumentRodic = this.rodic.document;
8			// hlavny div
9			this.hlavnyDiv = this.dokumentRodic.createElement('div');
10			this.hlavnyDiv.id='za-skryvacom';
11			this.hlavnyDiv.style.position='fixed';
12			this.hlavnyDiv.style.background='#ffffff';
13			this.internyRamec = this.dokumentRodic.createElement('iframe');
14			this.internyRamec.frameBorder=0;
15			this.internyRamec.style.borderWidth="1px";
16			this.internyRamec.style.borderStyle="solid";
17			this.internyRamec.style.borderColor="#000000";
18
19			// zavretie okna
20			this.zavri = this.dokumentRodic.createElement('div');
21			this.zavri.style.position='absolute';
22			this.zavri.style.top='10px';
23			this.zavri.style.right='20px';
24			this.zavri.style.padding='5px';
25			this.zavri.style.background='#ffffff';
26			this.zavri.style.textAlign='center';
27			this.hlavnyDiv.appendChild(this.zavri);
28
29			this.linkZavri = this.dokumentRodic.createElement('a');
30			this.linkZavri.href='javascript:void(0);';
31			this.linkZavri.style.display='block';
32			this.linkZavri.style.marginLeft='1px';
33			this.linkZavri.style.color='#000000';
34			this.linkZavri.style.fontSize='18px';
35			this.linkZavri.style.textDecoration='none';
36			
37//			this.linkZavriX = this.dokumentRodic.createElement('b');
38
39			// handler udalosti click
40			this.linkZavri.addEventListener('click', function () {
41			this.parentNode.parentNode.style.display='none';  
42			rodic.document.body.removeChild(rodic.document.getElementById("skryvac")); 
43			return false;}, false);
44
45		    var obrZavri = this.dokumentRodic.createElement("img");
46		    obrZavri.setAttribute("src", textZatvor);
47		    obrZavri.setAttribute("width", width);
48			this.linkZavri.appendChild(obrZavri);
49//			this.linkZavriX.appendChild(this.dokumentRodic.createTextNode(" X"));
50            this.zavri.appendChild(this.linkZavri);
51//            this.linkZavri.appendChild(this.linkZavriX);
52
53			this.hlavnyDiv.appendChild(this.internyRamec);
54			// na zaciatku je skryty
55			// skryvac toho co ho otvoril
56			this.skryvac = this.dokumentRodic.createElement('div');
57			this.skryvac.style.background='transparent';
58// opacity velmi spomaluje linuxove masiny na linuxe to je nepouzitelne
59//			this.skryvac.style.opacity=0.5;
60			this.skryvac.style.width=this.rodic.innerWidth+"px";
61			this.skryvac.style.height=this.dokumentRodic.body.scrollHeight+"px";
62			this.skryvac.id='skryvac';
63			this.skryvac.style.position='absolute';
64			this.skryvac.style.top=0;
65			this.skryvac.style.left=0;
66			this.skryvac.style.display='block';
67
68			this.dokumentRodic.body.appendChild(this.skryvac);
69			this.dokumentRodic.body.appendChild(this.hlavnyDiv);
70	}
71
72	KvaziPopUp.prototype.hlavnyDiv;
73	KvaziPopUp.prototype.internyRamec;
74
75	KvaziPopUp.prototype.show = function (url, pSirka, pVyska)
76	{
77		// viditelnost
78		this.skryvac.style.display='block';
79		this.hlavnyDiv.style.display='block';
80
81		// nacitam obsah
82		this.internyRamec.src=url;
83
84		// default hodnoty argumentov - technika v javascripte
85		pSirka = typeof(pSirka) != 'undefined' ? pSirka : 0;
86		pVyska = typeof(pVyska) != 'undefined' ? pVyska : 0;
87
88		var sirkaOkna = pSirka;
89		var vyskaOkna = pVyska;
90
91		// ak nie su zadane pSirka a pVyska, tak sa otvori okno takmer na celu obrazovku
92		if (sirkaOkna <= 0 || vyskaOkna <= 0)
93		{
94			sirkaOkna = this.rodic.innerWidth - 60;
95			vyskaOkna = this.rodic.innerHeight - 60;
96		}
97
98		var left = (this.rodic.innerWidth/2) - (sirkaOkna/2);
99		var top = (this.rodic.innerHeight/2) - (vyskaOkna/2);
100		
101		if (top > 200)
102		{
103			top = 200;
104		}
105 
106		this.hlavnyDiv.style.right="10px";
107		this.hlavnyDiv.style.top="10px";
108//		this.hlavnyDiv.style.top=top+"px";
109
110		this.hlavnyDiv.style.width=sirkaOkna+"px";
111		this.hlavnyDiv.style.height=vyskaOkna+"px";
112		this.hlavnyDiv.style.borderWidth="10px";
113		this.hlavnyDiv.style.borderStyle="solid";
114		this.hlavnyDiv.style.borderColor="#dddddd";
115
116		this.internyRamec.style.width=sirkaOkna+"px";
117		this.internyRamec.style.height=vyskaOkna+"px";
118	}
119
120	KvaziPopUp.prototype.hide = function ()
121	{
122			this.hlavnyDiv.style.display='none';
123			this.skryvac.style.display='none';
124			return false;

125	}
126
127
128	// funkcia OtvorKvaziOkno, pricom nastavi globalne premenne mojPopUp a rodic
129	// popup okno je vlastne div v okne rodica
130	var mojPopUp;
131	var rodic;
132	function OtvorKvaziOkno(url, textZatvor, width)
133	{
134		rodic=ZistiRodica();
135		mojPopUp = new KvaziPopUp(rodic, textZatvor, width); // globalna
136		if (rodic.innerHeight > 600)
137		{
138			vyska = 500;
139		}
140		else
141		{
142			vyska = (rodic.innerHeight/100)*80;
143		}
144		sirka = (rodic.innerWidth/100)*55;
145		mojPopUp.show(url);
146	}
147
148	function ZatvorKvaziOkno()
149	{
150		setTimeout('parent.parent.mojPopUp.hide()', 1000);
151	}
152
153	function ZistiRodica()
154	{
155		// rodic je v hierarchii prve okno, na spicke piramidy
156		// vyzera ze najvrchnejsie okno ma ako parent samo seba
157		// taze takto poriesim vnorenie troch urovni
158		var prodic = window;
159		prodic=prodic.parent.parent.parent.parent;
160		return prodic;
161	}
162