 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 
Andiamo verso Pannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice javascript e creiamo un nuovo codice javascript 
- 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
Buona giornata 
|
Indice
Menu di connessione rapida popup
Da Niko Lun 29 Giu 2015 - 14:36
Argomenti simili
Facebook
Twitter
Youtube
