Forum dei Forum: Aiuto per Forumattivo
Benvenuti sul forum di supporto di Forumattivo.




Per trarre il massimo vantaggio da tutti i servizi offerti dal nostro forum, effettua il login se sei già un nostro utente oppure registrati per far parte della nostra grande comunità. Il tutto, gratuitamente!

Crea anche tu un forum gratuitamente come questo! Clicca qui

Menu di connessione rapida popup


Tutorial Menu di connessione rapida popup

Messaggio Da Niko il Lun 29 Giu 2015, 14:36

Menu di connessione rapida popup


Menu di connessione rapida popup

Descrizione

Normalmente cliccando sul bottone login nel menu di navigazione si viene reindirizzati alla pagina di connessione.. con questa risorsa non sarà più necessario! Comparirà un popup dal quale potrete collegarvi senza cambiare pagina Wink


Andiamo verso Pannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice javascript e creiamo un nuovo codice javascript :new:


  • Titolo: a tua scelta
  • Dove: in tutte le pagine
  • Codice:
    Codice:
    // toolbar login
        $(function(){$(function(){
          if (_userdata.session_logged_in != 0) return;
          /* -- INIZIO AREA PERSONALIZZABILE -- */
          var both = true,
              redirect = window.location.pathname,
              imgOverlay = 'http://i39.servimg.com/u/f39/18/21/41/30/overla10.png',
              imgConnex = 'http://i59.servimg.com/u/f59/18/21/60/73/connex10.png',
          /* -- FINE AREA PERSONALIZZABILE -- */
              content = cre('DIV'), overlay = cre('DIV'), cacheMe = cre('DIV'), style = cre('STYLE'), css = '.loginForm,.loginOverlay{position:fixed;display:none}.loginForm{background:url('+imgConnex+') no-repeat 8% center #FBFBFB;background-size:12.5%;border:1px solid #CCC;border-radius:3px;padding:5%;top:20%;left:20%;right:20%;z-index:100001;}@media(max-width:500px){.loginForm{background-image:none}}@media(min-width:1000px){.loginForm{left:25%;right:25%}}.loginForm .loginTitle{font-size:12px;margin:5px 0;}.loginOverlay{background:url('+imgOverlay+');left:0;top:0;right:0;bottom:0;z-index:100000;cursor:pointer}.loginForm div { text-align:center; }.loginForm .inputbox {font-size:14px;height:25px;width:50% !important;border-radius:3px;padding-left:30px;}.loginForm input{margin:5px 0 !important}.loginForm .button1 {font-size:14px;padding:10px 15px !important;width:54% !important}#fa_username {background:url(http://i59.servimg.com/u/f59/18/21/60/73/un10.png) no-repeat 8px center #FFF}#fa_password {background:url(http://i59.servimg.com/u/f59/18/45/41/65/pw10.png) no-repeat 10px center #FFF}';
          content.className = 'loginForm', overlay.className = 'loginOverlay';
          cacheMe.innerHTML = '<img src="'+imgOverlay+'"/><img src="'+imgConnex+'"/>', cacheMe.style.display = 'none';
          style.type = 'text/css';
          if (style.styleSheet) style.styleSheet.cssText = css;
          else style.appendChild(document.createTextNode(css));
          document.getElementsByTagName('HEAD')[0].appendChild(style);
          content.innerHTML = '<form action="/login" method="post" name="form_login"><div class="loginTitle">Inserisci i tuoi dati per accedere a questo forum !</div><div><input tabindex="100" placeholder="username" name="username" id="fa_username" size="25" maxlength="40" value="" class="inputbox autowidth" type="text"/></div><div><input tabindex="101" id="fa_password" placeholder="password" name="password" size="25" maxlength="25" class="inputbox autowidth" type="password"/></div><div><input name="redirect" value="'+redirect+'" type="hidden"><input name="login" tabindex="103" value="Connettiti" class="button1" type="submit"></div><a href="#close" id="closeMe" style="position:absolute;bottom:5px;right:5px;">Nascondi</a></form>';
          insert(overlay, content, cacheMe);
        
          if (both === true) {
            var a = document.getElementsByTagName('A');
            for (var i=0; i<a.length; i++) if (/\/login/.test(a[i].href) && /(mainmenu|rightHeaderLink)/.test(a[i].className)) a[i].onclick = function() { display('block'), fadeIn(overlay, content); document.getElementById('fa_username').focus(); return false };
          } else {
            document.getElementById('fa_right').firstChild.onclick = function() {
              display('block'), fadeIn(overlay, content);
              document.getElementById('fa_username').focus();
              return false
            }
          }
          overlay.onclick = function() { close() };
          document.getElementById('closeMe').onclick = function() { close(); return false };
        
          function cre(el) { return document.createElement(el) };
          function display(val) { content.style.display = val, overlay.style.display = val };
          function close() { display('none'), overlay.style.opacity = 1, content.style.opacity = 1 };
          function insert() { var args = arguments; for (var i=0; i<args.length; i++) document.body.insertBefore(args[i], document.body.firstChild) };
          function fadeIn() {
            var args = arguments;
            for (var i=0; i<args.length; i++) args[i].style.opacity = 0;
            var fader = window.setInterval(function() {
              for (var i=0; i<args.length; i++) {
                var opa = Number(args[i].style.opacity);
                if (opa >= 1) {
                  window.clearInterval(fader);
                  return args[i].style.opacity = 1;
                } else args[i].style.opacity = opa + 0.15
              }
            },25);
          }
        })});



Personalizzazione

la parte modificabile è la seguente:
Codice:
/* -- INIZIO AREA PERSONALIZZABILE -- */
      var both = true,
          redirect = window.location.pathname,
          imgOverlay = 'http://i39.servimg.com/u/f39/18/21/41/30/overla10.png',
          imgConnex = 'http://i59.servimg.com/u/f59/18/21/60/73/connex10.png',
      /* -- FINE AREA PERSONALIZZABILE -- */

imgOverlay fa riferimento all'immagine dello sfondo "nero" per l'overlay
imgConnex fa riferimento all'immagine visualizzata a lato Wink

Buona giornata :good:




Regolamento • FAQ • Tutorial e risorse • Perdita della password • Pannello degli attrezzi

    

Niko
Amminattivo
Amminattivo


Sesso : Maschile
Età : 20
Messaggi : 7659
Località : Provincia di Varese


Vedere il profilo dell'utente https://www.translationscloud.com
Niko è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permesso di questo forum:
Non puoi rispondere agli argomenti in questo forum