Welcome To 4EN3RGY Romania
Register now to gain access to all of our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more. If you already have an account, login here - otherwise create an account for free today!

4en3rgY Romania


Nu sunteti conectat. Conectati-va sau inregistrati-va

[Tutoriale IT] Cum se realizeaza o fereastra modal

Vezi subiectul anterior Vezi subiectul urmator In jos  Mesaj [Pagina 1 din 1]

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 [Trebuie sa fiti inscris si conectat pentru a vedea acest link] 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

Vezi profilul utilizatorului

Vezi subiectul anterior Vezi subiectul urmator Sus  Mesaj [Pagina 1 din 1]

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum