home > tutoriale > javascript-ajax > cum-sa-centrezi-un-popup.php

Cum sa centrezi un popup

28 Ianuarie 2011 de Mihail Alin

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 .

Autor : tutorial cum sa centrezi un popup
Autor :   Mihail Alin

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.



Da si tu un like
  


Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta

Tutoriale din Categoria JavaScript & Ajax

  Meniu Slide-Out cu Jquery, Html si CSS   -   Cum sa centrezi o fereastra/popup   -   Cum sa faci un ceas cu JavaScript   -   Ferestre in Javascript/popups   -   Verificare formular cu JavaScript   -

Tutoriale aleatorii

  Meniu Slide-Out cu Jquery, Html si CSS   -   CSS3 border-radius si -moz-boder-radius   -   Centrarea paginii cu CSS   -   Table in HTML   -   Cum sa detectezi ip utilizator   -   Validarea unui formular   -   Cum sa centrezi o fereastra/popup   -
Spune-le prietenilor tai despre acest tutorial/articol
Nume:
Email:
Email-ul prietenului tau:
Mesajul:

Comenturi

0 comenturi pana acum... (posteaza si tu)

Comentarii:

Nume:

Email:

Comentariu:


 

*Intrebare de verificare : Raspunde la intrebarea din imaginea de mai jos ...

 
HINT : Raspunsul este din 6 litere, incepe cu r si se termina cu s


 


Important:
E-mailul nu va fi vizibil si NU va fi folosit de catre rotuts.com .
Nu sunt permise linkuri catre alte pagini.
Va rugam , comentariile sa ramana strict relationate cu topicul.
Comentariile considerate ofensive sau care nu au nici o legatura cu topicul vor fi sterse(trolling).

Folosirea codului HTML nu este permisa.
Puteti folosi BBcode pentru a va formata textul.