home > tutoriale > javascript-ajax > ferestre-in-javascript.php
Ferestre in JavaScript/pop-ups
16 Septembrie 2010 de Mihail AlinIn acest tutorial va voi arata cum puteti deschide si inchide o fereastra cu JavaScript, este foarte simplu.
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 :
|
||||||||||||||||||||||||||
| Caracteristici | Optional.Fiecare caracteristica trebuie separata cu o virgula si sa nu contina spatii intre ele.
|
||||||||||||||||||||||||||
Da si tu un like
Tweet
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 - Tutorial Jquery pentru incepatori - Cum sa centrezi o fereastra/popup - Cum sa faci un ceas cu JavaScript - Afisarea datei 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 - Trimiterea datelor din formular la adresa de e-mail - Cum sa centrezi o fereastra/popup - Cum sa faci un ceas cu JavaScript -
© 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 : 
Tutoriale indexate: 33 - Articole : 12 - Tools : 4
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