[Tutorial WEB] Cum se realizeaza o fereastra modal de atentionare folosind Remodal, PHP si jQuery

[daniels;]

Vom începe mark-up-ul, deci cu HTML-ul in care vom scrie un mesaj de atentionare, in accest exemplu vom introduce un mesaj care se adreseaza minorilor in special pentru site-urile XXX , dar si site-urile care promoveaza bauturi alcoolice.

HTML:

 

 

<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

 

 

<?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 pe 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 <a> 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.

Rezultat:

 

Edited June 1, 2016 by daniels;