home > tutoriale > javascript-ajax > ferestre-in-javascript.php

Ferestre in JavaScript/pop-ups

16 Septembrie 2010 de Mihail Alin

In acest tutorial va voi arata cum puteti deschide si inchide o fereastra cu JavaScript, este foarte simplu.

Tutoriale Javascript
Autor :   Mihail Alin

Pasul 1

Introducem botoanele sau link-urile(eu am ales butoane) :

	   <html>
	   <head>
	  	 <title>Cum sa deschizi o noua fereastra</title>
	   </head>
	   <body>
	  	 <input type="button" value="Deschide Fereastra" onclick="DeschideFereastra()" />
	  	 <input type="button" value="Inchide Fereastra" onclick="InchideFereastra()" />
	   </body>
	   </html>
	   

Pasul 2 - Scriem functiile care deschid si inchid fereastra

Aceaste functii trebuie scrise intre etichetele <head> si </head>

	   <head>
	   <title>Cum sa deschizi o noua fereastra!!!</title>
	   <script language="JavaScript">
	   //Script distribuit de www.rotuts.com . Tutoriale web-design , programare si multe altele.
	   <!--
	   var fereastra = null;
	   //facem functia deschide fereastra
	   function DeschideFereastra()
	   {
	   		//acum variabila "fereastra" nu mai este nula
	   		fereastra= window.open("","Galerie","width=300,height=400");
	   }
	   //functia de inchidere
	   function InchideFereastra()
	   {
	   		//daca fereastra ESTE deschisa, atunci variabila "fereastra" nu este nula.
	   		if(fereastra != null)
			{
				//daca se afla ca variabila "fereastra" NU este nula, atunci inchidem fereastra
				fereastra.close();
				fereastra=null;
			}
	   }
	   //-->
	   </script>
	   </head>
	   

Ok, haideti sa explicam mai bine codul de mai sus :

Definim o functie cu numele DeschideFereastra, care foloseste metodul open pentru a deschide o noua fereastra.
Metodul open foloseste 3 parametrii :

Sintaxa:( window.open("URL","nume","[caracteristici]")
URL:
- indica documentul care se va incarca in noua fereastra , poate avea url-ul unei pagini din WWW.Poate fi absoluta sau relativa.
Nume:
- identifica noua fereastra
Caracteristici:
- se indica propietatile noii ferestre;daca trebuie sa apara bara de unelte, de directie, latimea si inaltimea, etc.
- toate caracteristicile trebuie scrise intre ghilimele dar fara spatii intre ele.

Dupa care, definim functia InchideFereastra , care o vom folosi pentru a inchide fereastra doar in cazul in care aceasta exista ( nu este inchisa )

Demo: Ferestre in Javascript simple

Un exemplu mai complex

Sa zicem ca dorim sa deschidem o fereastra care sa aiba inaltimea de 400,latimea de 400,bare de scroll, toolbar, menubar, location.
Atunci am avea codul de mai jos : ( lista cu toti parametrii la sfarsitul tutorialului ) .

	   <html>
	   <head>
	   	<title>Ferestre in JS</title>
		<script type="text/javascript">
		//ascundem de navigatoarele care nu suporta JS
		<!--
		//stabilim variabila "fereastra"
		var fereastra = null;
		//facem functia Deschide
		function Deschide()
		{
			//in cazul in care functia Deschide este chemata, atunci variabila "fereastra" o sa stocheze fereastra.
			fereastra = window.open('rotuts.com','_blank','width=400,height=400,toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes
			,scrollbars=yes,resizable=yes');
			//focalizam fereastra
			fereastra.focus();
		}
		
		//functia Inchide
		function Inchide()
		{
			//daca variabila "fereastra" nu/difera este nula, atunci....
			if(fereastra != null)
			{
				//inchidem fereastra
				fereastra.close();
				//setam variabila la null
				fereastra=null;
			}
		}
		//-->
		</script>
	   </head>
	   <body>
	    <input type="button" onclick="Deschide()" value="Deschide fereastra"/>
 	    <input type="button" onclick="Inchide()" value="Inchide fereastra"/>
	   </body>
	   </html>
	   

Demo: Ferestre in Javascript cu parametri

"In-line" Pop-up

Deasemenea putem sa scriem tot acest cod in linie, cand zic in linie ma refer la faptul ca putem scrie codul chiar in atributul onclick
Asa va arata codul :

	    <input type="button" onclick="fereastra=window.open('rotuts.com','','width=400,height=400,toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes');" value="Deschide fereastra"/>
        <input type="button" onClick="fereastra.close();" value="Inchide fereastra"/>
	    

Demo: Inline javascript

Lista cu parametrii

Sintaxa : window.open(URL,name,caracteristici,replace)
Parametrii Descriere
URL Optional,specifica URL-ul care o sa se deschida in acea fereastra.Daca nu este specificat o sa se deschida o pagina goala
Name Optional, specifica atributul sau numele ferestrei.Poate avea urmatoarele valori :
  • _blank
  • _parent
  • _self
  • _top
  • name
Caracteristici Optional.Fiecare caracteristica trebuie separata cu o virgula si sa nu contina spatii intre ele.
directories= yes sau no Daca sa adauge sau nu butoane de directorii. Doar IE
fullscreen=yes sau no Daca fereastra sa fie full-screen sau nu .Default no.
height=pixeli Inaltimea ferestrei.Minimul este de 100px
left=pixeli Pozitia partii stangi a ferestrei.
location=yes sau no Daca sa arate campul cu adresa sau nu.Default este yes
menubar=yes sau no Daca sa arate bara de meniu.Default este yes
resizable=yes sau no Daca fereastra poate fi marita sau micsorata,yes sau no.Default este yes.
scrollbars=yes sau no Daca sa arate barele de scroll.Default este yes.
status=yes sau no Daca sa adauge sau nu o bara de status.Default este yes.
titlebar=yes sau no Daca sa arate bara de titlu sau nu.Ignorata daca chemarea nu este o aplicatie HTML sau un cuadru de dialog de incredere.Default este yes.
toolbar=yes sau no Daca sa arate toolbar-ul sau nu.
top=pixeli Pozitia partii de sus a ferestrei
width=pixeli latimea ferestrei in pixeli.Valoarea minima este 100 pixeli.
Sursa acestei table este : w3schools.com


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   -   Afisarea datei cu Javascript   -   Verificare formular cu JavaScript   -

Tutoriale aleatorii

  Meniu Slide-Out cu Jquery, Html si CSS   -   CSS3 border-radius si -moz-boder-radius   -   Cum sa faci un simplu web-site pe 3 coloane   -   Centrarea paginii cu CSS   -   Cum sa inserezi un sunet/melodie intr-o pagina   -   Trimiterea datelor din formular la adresa de e-mail   -   Verificare formular cu JavaScript   -
Spune-le prietenilor tai despre acest tutorial/articol
Nume:
Email:
Email-ul prietenului tau:
Mesajul:

Comenturi

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

cau bau

Postat de Al. Cremaedia pe data de: Wednesday, 09.24.14 @ 09:19am

Salut Alin , super tutorial, cautam ceva asemanator si am dat peste acest tutorial , merci .

Postat de Paul pe data de: Thursday, 12.30.10 @ 09:16am

super tutorial , btw tabla nu este absolut completa am vazut pe w3schools ca are mai multe elemente.

Postat de Sebastian pe data de: Friday, 12.3.10 @ 15:01pm

chiar ceea ce cautam , multumesc !!!!

Postat de Adrian pe data de: Sunday, 10.17.10 @ 20:56pm

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.