Re: How to make this type of login pop up?

by **skouliki** December 21st 2016, 8:04 am

hello

delete link / mistake

by **skouliki** December 21st 2016, 11:19 am

thanks

@ChanelW

https://help.forumotion.com/t143870-add-a-quick-login-form-to-the-toolbar?highlight=login+form

by amghidh December 21st 2016, 11:30 am

Hi,

JavaScript:
"All Pages"

Code:: $(function() { if (_userdata["session_logged_in"] == "0") { /* PERSONNALISATION DES TEXTES */ var txt_username = "Username:", txt_password = "Password:", txt_login = "Login", txt_remember = "Auto-Login next time", txt_guest = "Not registred?", txt_create = "Sign Up", txt_lost = "Forgot password?", txt_recover = "Recover"; /* 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(); } }); } });

CSS:

Code:: /** 24. Quick Login**/ #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; }

King Regards,
Good Luck