Cum sa centrezi un popup

Daca tot am facut un tutorial despre cum sa deschidem ferestre folosind Javascript , m-am gandit ca un tutorial despre cum sa le centram pe ecranul vizitatorului ar fi bine venit .

Codul HTML

O sa facem doua butoane, pentru a deschide si inchide popup-ul , acestor butoane le adaugam eventul onClick pentru a chema functia Javascript care inchide si deschide fereastra :

<input type="button" onClick="Deschide();" value="Deschide Fereastra"><br/>
<input type="button" onClick="Inchide();" value="Inchide Fereastra">
      

Codul Javascript

Dupa cum bine stiti ( sau nu :P ) , Javascript se executa in browser-ul vizitatorului, avand in vedere ca noi dorim ca fereastra noastra sa apara centrata pe monitorul fiecarui user, cu javascript o sa reusim sa facem acest lucru.Este chiar foarte simplu.
Dupa ce aflam latimea si inaltimea ecranului folosind screen.width si screen.height scadem latimea si inaltimea actuala a ferestrei facuta de noi dupa care impartim la 2 :

<script type="text/javascript" >
// www.rotuts.com Tutoriale si resurse web
var fereastra = null;
var x = (screen.width -700) /2; // scadem 700 (latimea ferestrei ) din valoarea latimii a ecranului , dupa care impartim la 2
var y = (screen.height -400) /2; // scadem 400 (inaltimea ferestrei ) din valoarea inaltimii a ecranului , dupa care impartim la 2
function Deschide(){
	fereastra = window.open("http://www.rotuts.com/","Rotuts","width=700,height=400");
	fereastra.moveTo(x,y); // mutam fereastra la coordonatele obtinute
	fereastra.focus(); // focalizam fereastra
	
}
function Inchide(){
	if(fereastra != null) // daca variabila fereastra NU este goala ( null ) atunci inseamna ca fereastra este deschisa , deci trebuie sa o inchidem.
	{
		fereastra.close()
		fereastra = null;
	}
}
</script>
      

Folosind moveTo reusim sa mutam fereastra la coordonatele obtinute in urma calcularii inaltimii si latimii.

• Contact
• Upload Tutorial
• Termeni de utilizare

© Copyright 2009 rotuts.com . All rights Reserved . Designed by Mihail Alin. Nu se recomanda IE6 ca browser pentru navigarea acestui website.

Designul acestui web-site este complet optimizat pentru urmatoarele navigatoare | This Web-site design is fully optimized for these browsers :