Scris de Mihai Dum Mai 10, 2020 11:38 pm
| Conexiune rapidă pe toate paginile | |
Acest tutorial oferă posibilitatea deschiderii unui pop-up clic pe orice legătură de conexiune. Formularul de autentificare este disponibil fără o modificare a paginii (faceți click pe previzualizarea de mai jos pentru a mări).
Crearea de scripturiPanoul de administrare Module HTML și Javascript managementul codului JavaScript Gestionarea codurilor javascript trebuie să fie activată.
Creați un script nou pe care îl veți activa pe toate paginile și introduceți acest cod:
- Cod:
$(function() { if (_userdata["session_logged_in"] == "0") { /* PERSONNALISATION DES TEXTES */ var txt_username = "Nom d'utilisateur", txt_password = "Mot de passe", txt_login = "Connexion", txt_remember = "Rester connecté(e)", txt_guest = "Pas encore inscrit(e) ?", txt_create = "Créez un compte", txt_lost = "Mot de passe perdu ?", txt_recover = "Récupérez-le"; /* FIN DE PERSONNALISATION - Ne rien modifier ci-après */ $('body').prepend('<div id="quickloginform_overlay" style="display:none;z-index:2147483647"></div><div id="quickloginform" style="display:none;z-index:2147483647"><form id="fa-login-form" class="login-form" name="form_login" method="post" action="/login"><input type="text" maxlength="40" name="username" placeholder="' + txt_username + '" required=""><input type="password" maxlength="32" name="password" placeholder="' + txt_password + '" required=""><button name="login">' + txt_login + '</button><label><p>' + txt_remember + ' <input type="checkbox" style="vertical-align: middle;" name="autologin"></p></label><p style="float:left; text-align:left;">' + txt_guest + '<br><a href="/register">' + txt_create + '</a></p><p style="float:right; text-align:right;">' + txt_lost + '<br><a href="/profile?mode=sendpassword">' + txt_recover + '</a></p><div style="clear:both;"></div><input name="redirect" value="' + window.location.pathname + '" type="hidden"></form></div>'); $('a[href*="/login"]').click(function() { $('#quickloginform, #quickloginform_overlay').fadeIn(); $('#quickloginform input[name="username"]').focus(); return false; }); $(document).click(function(e) { if ($(e.target).closest('#quickloginform form').length === 0) { $('#quickloginform, #quickloginform_overlay').fadeOut(); } }); $(document).keyup(function(e) { if (e.keyCode == 27) { $('#quickloginform, #quickloginform_overlay').fadeOut(); } }); } });
Personalizarea scriptuluiToate textele pot fi personalizate în prima parte a scriptului:
- Cod:
var txt_username = "Nom d'utilisateur", txt_password = "Mot de passe", txt_login = "Connexion", txt_remember = "Rester connecté(e)", txt_guest = "Pas encore inscrit(e) ?", txt_create = "Créez un compte", txt_lost = "Mot de passe perdu ?", txt_recover = "Récupérez-le";
Inserați CSSPentru a da o imagine ca cea vazuta anterior, trebuie sa adaugati stilul. Panou de administrare Afisare Culori Foaie de stil
Adăugați acest cod:
- Cod:
#quickloginform_overlay { background-color:#333; height:100%; left:0; opacity:0.7; position:fixed; top:0; width:100%; } #quickloginform { height:100%; position:fixed; top:20%; width:100%; } #quickloginform>form { background-color:#fff; box-sizing:border-box; margin:auto; padding:20px 30px; width:360px; border-radius:3px; } #quickloginform input[type="password"],#quickloginform input[type="text"] { background:#f2f2f2 none repeat scroll 0 0; border:0 none; box-sizing:border-box; font-family:"Helvetica"; font-size:14px; margin:0 0 15px; outline:0 none; padding:15px; width:100%; } #quickloginform button { background-color:#369fcf; border:0 none; color:#ffffff; cursor:pointer; font-family:"Helvetica"; font-size:14px; outline:0 none; padding:15px; text-transform:uppercase; width:100%; } #quickloginform p:nth-child(n) { margin-bottom:0; margin-top:20px; text-align:center; } #quickloginform form p { color:#b3b3b3; font-size:11px; } #quickloginform form a { color:#2b86b3; text-decoration: none; } Puteți schimba aspectul acestui formular de autentificare după cum doriți. Implicit, culoarea butonului de conectare este: #369fcf. Acesta poate fi modificat pe linia 38 a codului anterior.
Acest truc este acum funcțional. Puteți să-l testați prin deconectarea de pe forum și făcând click pe butonul de conectare.
Unele observații tehnice:
- Formularul se deschide făcând click pe orice legătură de conexiune, indiferent dacă este inclusă în bara de navigare sau în altă parte,
- Formularul se închide fie făcând click oriunde în afara formularului, fie apăsând tasta "Esc"
- După ce v-ați conectat, utilizatorul este automat returnat la pagina pe care a fost înainte de a fi conectat.
|
*** Forumul de suport nu vă va solicita niciodată adresa de e-mail sau parola, așa că vă rugăm să nu le postați nicăieri! ***
Nu ofer suport prin PM!