În continuare o să vă prezint un cod JavaScript cu ajutorul căruia puteți să deschideți o pagină nouă de tip fereastră popup. Prima dată generăm funcția care va deschide fereastra și va scrie mesajul în ea.
Cod:
<script language="javascript" type="text/javascript">
<!--
function fereastraNoua(mesaj)
{
fereastra = window.open("about:blank", "_blank", "width=450, height=250, menubar=0, titlebar=0, toolbar=0, status=0, scrollbars=1")
fereastra.document.write(mesaj)
}
-->
</script>
Acest cod este de preferat să îl puneți în head, dar funcționează la fel de bine și în body. Să explic puțin ce face acest cod.
function fereastraNoua(mesaj)- crează o funcție numită fereastraNoua care primește ca parametru un șir de caractere preluat de variabila mesaj
Mai departe, în interiorul acestei funcții avem o variabilă numită fereastra care are ca parametru window.open()
window este un obiect JavaScript iar open este metoda acelui obiect. În acest caz se traduce prin "deschide fereastra"
Parametrii pe care metoda open îi poate avea sunt următorii:
open( [sURL] [, sName] [, sFeatures] [, bReplace])
Unde [sURL] este un parametru opțional care conține calea și numele paginii pe care dorim să o deschidem (în cazul nostru about:blank specifică o pagină nouă goală) Dacă nu se specifică URL-ul se va deschide automat o pagină nouă goală.
[, sName] - este de asemenea un parametru opțional care indică numele acelei pagini (putem specifica orice nume dorim) și este folosit ca valoare pentru atributul TARGET specificat într-un formular sau într-un link (form sau a href). Atributele HTML standard care se pot specifica sunt:
| _blank |
sURL este luat întro nouă fereastră fară nume |
| _media |
sURL este luat în partea de media a documentului HTML. Este activ în IE6 sau următoarele. |
| _parent |
sURL este luat în frame-ul principal. Dacă nu există nici un frame principal, această valoare va acționa la fel ca și parametrul _self |
| _search |
Este activ de la IE5 sau ulterior. sURL este deschis în partea de căutare a browserului. |
| _self |
Documentul curent este înlocuit cu documentul specificat la sURL |
| _top |
sURL înlocuiește orice frame care este deja încărcat. Dacă nu este nici un frame definit, această valoare se comportă la fel ca și _self |
[, sFeatures] - (opțional) conține parametrii de afișare a ferestrei, care pot fi următorii:
| channelmode |
= { yes | no | 1 | 0 } |
Default este setat pe no |
| directories |
= { yes | no | 1 | 0 } |
Default este setat pe yes |
| fullscreen |
= { yes | no | 1 | 0 } |
Specifică dacă să deschidă fereastra în full-mode (pe tot ecranul). Default este no |
| height |
= number |
Specifică înalțimea ferestrei în pixeli. Valoarea minimă este 100. |
| left |
= number |
Specifică poziția din stânga în pixeli. Valoarea este relativă la partea de sus-stânga a ecranului. Valoarea trebuie specificată mai mare sau egală cu 0. |
| location |
= { yes | no | 1 | 0 } |
Default este yes |
| menubar |
= { yes | no | 1 | 0 } |
Specifică dacă să afiseze bara de meniu. Default este yes |
| resizable |
= { yes | no | 1 | 0 } |
Specifică dacă se poate redimensiona de catre user sau are marimea fixă. Default este yes |
| scrollbars |
= { yes | no | 1 | 0 } |
Specifică dacă se afișează bara de scroll. Default este yes. |
| status |
= { yes | no | 1 | 0 } |
Specifică dacă se afișează bara de stare în josul ferestrei. Default este yes. |
| titlebar |
= { yes | no | 1 | 0 } |
Specifică dacă se afișează bara cu titlul ferestrei. default este yes |
| toolbar |
= { yes | no | 1 | 0 } |
Specifică dacă se afișează bara cu butoane ale browserului (next, back, save...) Default este yes. |
| top |
= number |
Specifică poziția de sus a ferestrei în pixeli. Valoarea este relativă la partea de sus-stanga a ecranului. Valoarea trebuie să fie mai mare sau egală cu 0. |
| width |
= number |
Specifică lațimea ferestrei în pixeli. Valoarea minimă este 100. |
După ce am generat fereastra, scriem în ea mesajul dorit folosind linia
fereastra.document.write(mesaj)
Pentru a apela această funcție într-o pagină web putem face în felul următor:
<a href="javascript:fereastraNoua('Mesajul pentru fereastra noua vine aici')">
Clik aici</a>
Puteți adapta să apară fereastra nouă în diferite situații astfel:
<a href="javascript:fereastraNoua('Mesajul pentru fereastra noua vine aici')" onmouseover="fereastraNoua('Mesajul apare la hover')">
Clik aici</a>
În situația de mai sus va apare o fereastră la mișcarea mouse-ului peste link și altă fereastră când dați clik. Puteți adapta astfel pentru orice situație să apară câte o fereastră. În cazul când browserul nu permite afișarea ferestrelor de tip popup, este posibil ca scriptul să nu funcționeze.