![[Tutoriale IT] Cum se realizeaza o fereastra modal 2z8bv910](https://i.servimg.com/u/f56/18/00/54/69/2z8bv910.png)
![[Tutoriale IT] Cum se realizeaza o fereastra modal KlPSqos](https://i.imgur.com/klPSqos.png)
Sign In![[Tutoriale IT] Cum se realizeaza o fereastra modal WVZcJtm](https://i.imgur.com/WVZcJtm.png)
Create Account![[Tutoriale IT] Cum se realizeaza o fereastra modal 6gJP3vN](https://i.imgur.com/6gJP3vN.png)
Fondator
![[Tutoriale IT] Cum se realizeaza o fereastra modal 111010](https://i.servimg.com/u/f34/11/14/55/92/111010.png)
Cum se realizeaza o fereastra modal de atentionare folosind Remodal, PHP si jQuery
A trecut ceva timp de cand nu am mai scris pe blog…, stiu ca destul, dar timpul pe care l-am avut la dispozitie in perioada asta a fost foarte limitat, imi cer scuze si sper ca ma intelegeti, voi incerca sa scriu mai des tuoriale explicative si clare asa cum vreau sa va obisnuiesc.
Astazi vreau sa acopar partea de webdesign si voi scrie un tutorial in care voi explica realizarea unei ferestre de atentionare tip modal folosind o librarie numita Remodal cu putin ajutor din partea superglobalei $_COOKIE si functiei setcookie din PHP. Vreau sa mentionez faptul ca acest tutorial se adreseaza persoanelor care fac activitati in domeniul webdesign-ului sau developerilor. Este ceva simplu si eficient.
Vom incepe cu mark-up-ul, deci cu HTML-ul in care vom scrie un mesaj de atentionare, in acest exemplu vom introduce un mesaj care se adreseaza minorilor folosit in special pentru site-uri XXX , dar si site-uri care promoveaza bauturi alcoolice.
HTML
Daca va documentati pe site-ul remodal veti vedea ca html-ul contine anumite atribute definite si necesare pentru functionarea ferestrei, incepand chiar cu „data-remodal-id=”modal” pe care div-ul parinte il contine si de care ne vom folosi in script pentru a-l identifica. Urmeaza mesajul propriu-zis in care puteti include ceea ce doriti. Ajungem la butoanele de refuz sau acceptare, care de obicei, sunt un simplu DA si NU, aici observam ca la DA am pus atributul data-remodal-action=”confirm” si doua clase remodal-confirm si close fiind necesare pentru ca fereastra sa fie inchisa atunci cand se vor accepta conditiile scrise. La butonul de NU am introdus clasa remodal-cancel si un link la care optiunea il va trimite in cazul in care clientul o va alege fortand-ul astfel sa paraseasca site-ul.
PHP & JAVASCRIPT
Codul de sus va functiona automat daca vom aplica scriptul scris mai sus in tag-urile script folosind jQuery. Dupa cum puteti observa am tintit div-ul parinte folosind atributul data-remodal-id=modal e care l-am atribuit acestuia exact asa cum documentatia librarieri Remodal o explica. Am aplicat div-ului parinte eventul remodal definit in librarie, dupa care, i-am adaugat extraoptiunile valabile si expuse in DOCUMENTATIA REMODAL, in acest caz fereastra sa fie inchisa cand se apasa butonul DA, sa nu se inchida fereastra daca utilizatorul va apsa in afara acesteia sau apasand butonul ESC de la tastatura, cele mai multe astfel de ferestre au aceasta posibilitate predefinita. De asemenea am atribuit optiunea de .open(); ferestrei pentru ca aceasta sa se deschida automat la incarcarea paginii de pe site-ul accesat, insa, totul se poate modifica conform cerintelor voastre cititi cu atentie instructiunile Remodal pentru detalii suplimentare.
Folosind instructiunile de mai sus fereastra se va deschide in formatul standard find si responsive avand, asadar, o buna vizualizare pe celelalte tipuri de ecran, smartphone, tableta, etc. Daca lasam codul scris in acest fel, fereastra se va deschide automat de fiecare data cand accesam o pagina din site, pentru a impiedica asta, ne vom ajuta de PHP, mai exact de variabila superglobala $_COOKIE si functia setcookie. Prin asta vom creea in browserul utilizatorului un cookie numit „av” in cod in care vom retine numai optiunea DA, in cazul in care se va apasa NU atunci utilizatorul va fi redirectionat in link-ul pus in tagul si daca va reveni pe site atunci fereastra ii va aparea din nou. Asadar in cookie-ul „av” se va retine optiunea astfel incat daca utilizatorul este de acord cu informatiile expuse de voi atunci va putea sa navigheze pe site fara ca fereastra sa-i mai apara timp de 604800 secunde definita in functia setcookie(), fiind 7 zile dupa un calcul efectuat. Scriptul, in acest caz, va fi introdus in tag-urile php, reusim astfel sa implementam o fereastra de tip atentionare eficienta si necesara pentru anumite tipuri de site-uri.
SURSA:
A trecut ceva timp de cand nu am mai scris pe blog…, stiu ca destul, dar timpul pe care l-am avut la dispozitie in perioada asta a fost foarte limitat, imi cer scuze si sper ca ma intelegeti, voi incerca sa scriu mai des tuoriale explicative si clare asa cum vreau sa va obisnuiesc.
Astazi vreau sa acopar partea de webdesign si voi scrie un tutorial in care voi explica realizarea unei ferestre de atentionare tip modal folosind o librarie numita Remodal cu putin ajutor din partea superglobalei $_COOKIE si functiei setcookie din PHP. Vreau sa mentionez faptul ca acest tutorial se adreseaza persoanelor care fac activitati in domeniul webdesign-ului sau developerilor. Este ceva simplu si eficient.
Vom incepe cu mark-up-ul, deci cu HTML-ul in care vom scrie un mesaj de atentionare, in acest exemplu vom introduce un mesaj care se adreseaza minorilor folosit in special pentru site-uri XXX , dar si site-uri care promoveaza bauturi alcoolice.
HTML
- Cod:
<div data-remodal-id=”modal”>
<h1>AI PESTE 18 ANI?</h1>
<p style=”font-size:15px”>Odata cu accesarea acestui site, te declari de acord cu conditiile de utilizare. Site-ul promoveaza bauturi alcoolice.</p>
<p style=”font-size:15px”> Ai varsta legala pentru a accesa acest site?</p>
<br />
<button data-remodal-action=”confirm” class=”remodal-confirm close”>DA</button>
<a class=”remodal-cancel” href=”http://google.com”>NU</a>
</div>
Daca va documentati pe site-ul remodal veti vedea ca html-ul contine anumite atribute definite si necesare pentru functionarea ferestrei, incepand chiar cu „data-remodal-id=”modal” pe care div-ul parinte il contine si de care ne vom folosi in script pentru a-l identifica. Urmeaza mesajul propriu-zis in care puteti include ceea ce doriti. Ajungem la butoanele de refuz sau acceptare, care de obicei, sunt un simplu DA si NU, aici observam ca la DA am pus atributul data-remodal-action=”confirm” si doua clase remodal-confirm si close fiind necesare pentru ca fereastra sa fie inchisa atunci cand se vor accepta conditiile scrise. La butonul de NU am introdus clasa remodal-cancel si un link la care optiunea il va trimite in cazul in care clientul o va alege fortand-ul astfel sa paraseasca site-ul.
PHP & JAVASCRIPT
- Cod:
<?php if (!isset($_COOKIE[‘av’])){ setcookie(„av”, „true”, time()+604800, „/”); ?>
<script type=”text/javascript”>
jQuery(window).load(function(){
jQuery(‘[data-remodal-id=modal]’).remodal({
closeOnConfirm: true,
closeOnCancel: false,
closeOnOutsideClick: false,
closeOnEscape: false
}).open(); });
</script>
<?php } ?>
Codul de sus va functiona automat daca vom aplica scriptul scris mai sus in tag-urile script folosind jQuery. Dupa cum puteti observa am tintit div-ul parinte folosind atributul data-remodal-id=modal e care l-am atribuit acestuia exact asa cum documentatia librarieri Remodal o explica. Am aplicat div-ului parinte eventul remodal definit in librarie, dupa care, i-am adaugat extraoptiunile valabile si expuse in DOCUMENTATIA REMODAL, in acest caz fereastra sa fie inchisa cand se apasa butonul DA, sa nu se inchida fereastra daca utilizatorul va apsa in afara acesteia sau apasand butonul ESC de la tastatura, cele mai multe astfel de ferestre au aceasta posibilitate predefinita. De asemenea am atribuit optiunea de .open(); ferestrei pentru ca aceasta sa se deschida automat la incarcarea paginii de pe site-ul accesat, insa, totul se poate modifica conform cerintelor voastre cititi cu atentie instructiunile Remodal pentru detalii suplimentare.
Folosind instructiunile de mai sus fereastra se va deschide in formatul standard find si responsive avand, asadar, o buna vizualizare pe celelalte tipuri de ecran, smartphone, tableta, etc. Daca lasam codul scris in acest fel, fereastra se va deschide automat de fiecare data cand accesam o pagina din site, pentru a impiedica asta, ne vom ajuta de PHP, mai exact de variabila superglobala $_COOKIE si functia setcookie. Prin asta vom creea in browserul utilizatorului un cookie numit „av” in cod in care vom retine numai optiunea DA, in cazul in care se va apasa NU atunci utilizatorul va fi redirectionat in link-ul pus in tagul si daca va reveni pe site atunci fereastra ii va aparea din nou. Asadar in cookie-ul „av” se va retine optiunea astfel incat daca utilizatorul este de acord cu informatiile expuse de voi atunci va putea sa navigheze pe site fara ca fereastra sa-i mai apara timp de 604800 secunde definita in functia setcookie(), fiind 7 zile dupa un calcul efectuat. Scriptul, in acest caz, va fi introdus in tag-urile php, reusim astfel sa implementam o fereastra de tip atentionare eficienta si necesara pentru anumite tipuri de site-uri.
SURSA:
- Spoiler:
- pctutoriale.ro
![[Tutoriale IT] Cum se realizeaza o fereastra modal 0](http://sstatic1.histats.com/0.gif?2212224&101)
