Forum gratuit: forum de suport al utilizatorilor
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.

Conexiune rapidă pe toate paginile

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Conexiune rapidă pe toate paginile

Mesaj 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).
Conexiune rapidă pe toate paginile GhBpEIo

Crearea de scripturi

Panoul 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 scriptului

Toate 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 CSS

Pentru 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.





Conexiune rapidă pe toate paginile Untit104
Conexiune rapidă pe toate paginile KmYIBDv
Conexiune rapidă pe toate paginile Scre1015 Conexiune rapidă pe toate paginile 398 Conexiune rapidă pe toate paginile 2209 Conexiune rapidă pe toate paginile Scre1016 Conexiune rapidă pe toate paginile Portoq16
Mesaje: 22934 ● Utilizatori: 18243 ● Ultimul membru: » sokardax «
Conexiune rapidă pe toate paginile 887435_logo_512x512 Server de Discord: Forum gratuit
Mihai

Mihai
Administrator
Administrator

Mesaje : 1551
Varsta : 26
Localizare : București, România
Data înscrierii : 25/09/2014
Mulțumiri : 101
Google Chrome phpBB3

http://fgsuport.forumgratuit.ro
Mihai a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum