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:

avatar
Niko
Veterano dello staff
Veterano dello staff


Sesso : Maschile
Età : 21
Messaggi : 7761
Località : Provincia di Varese


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

 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum