This tutorial will give you the possibility to create a pop-up window every time someone clicks on the Log In button. The form is available without being redirected to another page.
Create the script In order to create the script, you need to go to your ACP(Admin Control Panel) > Modules > HTML & JAVASCRIPT > Javascript codes management and create a new script which will be available in every page:
- Code:
$(function() { if (_userdata["session_logged_in"] == "0") { /* PERSONNALISATION DES TEXTES */ var txt_username = "Username", txt_password = "Password", txt_login = "Log In", txt_remember = "Log in automatically", txt_guest = "Have you not registered yet ?", txt_create = "Register", txt_lost = "Have you forgotten your password ?", txt_recover = "Retrieve it"; /* END OF PERSONALISATION - Do not modify the code below */ $('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(); } }); } });
The Javascript code management should be enabled.
Personalise the script The first part of the script can be personalised in order to meet your needs :
- Code:
var txt_username = "Username", txt_password = "Password", txt_login = "Log In", txt_remember = "Log in automatically", txt_guest = "Have you not registered yet ?", txt_create = "Register", txt_lost = "Have you forgotten your password ?", txt_recover = "Retrieve it";
Do not forget to add the quotes after you have modified the text.
Add the CSS If you want to have the same appearance with the example above, you need to add this CSS.
Go to your ACP(Admin Control Panel) > Display > Pictures and Colors > Colors > CSS and add the following code:
- Code:
#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; }
You can modify the appearance of the pop-up window as you wish. By default, the color of the Log In button is this one : #369fcf You can modify it in 38th line of the code.
You can test this script by logging out and then by clicking on the Log In button.
The toolbar must be enabled.
Technical Notes:
- The pop-up window opens by clicking on any Log In link whether it is on the navigation bar or not,
- The pop-up window closes by clicking outside of it or by clicking on the Escape button (ESC) on your keyboard,
- After you log in, you will be redirected to the page you were before you logged in.
|