Hi there,
I have created a login button that opens in a nice popup...
So maybe someone is also interested in it... so I share it with you
I have changed some code from the original source here: https://codepen.io/hahamimidido/pen/YqKpzv (There is also a demo to see how it works)
Then I just made some customizations in order to get it work without no problems with our forum style template. So it might be necessary, that you also need to change some of the dimensions/positions. Depends on where you place the button and how it looks like on mobile devices... so you shoul also add CSS Media Queries.
In order to show the button only to users who are not logged in yet, just put the following html code into an "ad module" and place it to the section of page where you want to show the button.
Then turn "who can view" on for "unregistred/not logged in users". (DonΒ΄t know whats the correct phrase for this in english)
And of course you have to change "example.com" to the correct link to your domain
Then I added the following Code to the additional_CSS
Then I added the following Code to the footer template right before closing body tag:
Thats all
Except: If you don't use fontawesome yet on your forum, then you also need to add it.
Just place
right on top of your additional CSS Style
or if this does not work you need to place
right on top of your head_include template in admincp
I have created a login button that opens in a nice popup...
So maybe someone is also interested in it... so I share it with you
I have changed some code from the original source here: https://codepen.io/hahamimidido/pen/YqKpzv (There is also a demo to see how it works)
Then I just made some customizations in order to get it work without no problems with our forum style template. So it might be necessary, that you also need to change some of the dimensions/positions. Depends on where you place the button and how it looks like on mobile devices... so you shoul also add CSS Media Queries.
In order to show the button only to users who are not logged in yet, just put the following html code into an "ad module" and place it to the section of page where you want to show the button.
Then turn "who can view" on for "unregistred/not logged in users". (DonΒ΄t know whats the correct phrase for this in english)
And of course you have to change "example.com" to the correct link to your domain
Code:
<div class="login_popup"> <div class="overlay"></div> <div class="mask"> <i class="fa fa-times fa-times-remove" aria-hidden="true"><a href=""></a></i> <div class="login_table"> <h3>Login In</h3> <iframe id="idLoginIframe" class="" src="https://www.example.com/auth/login-form"></iframe> </div> </div> </div> <!-- login popup End --> <div class="container"> <div class="row"> <a href="javascript:;" class="btn-login">LOG IN</a> </div> </div>
Code:
/* START LOGIN BUTTON */ /*-----------overlay*/ .overlay { background-color: rgba(0,0,0,0.68); position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; height: 100vh; width: 100vw; z-index: -1; display: none; overflow: hidden; } .login_popup { position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; height: 100vh; width: 100vw; z-index: 9999999; display: none; } /*-----------btn*/ .btn-login { color: #FFF; margin: 20px auto 0px !important; float: none; border-radius: 3px; display: block; width: 250px; height: 50px; font-size: 20px; line-height: 50px; text-align: center; background: rgb(47, 68, 86); border: 1px solid #FFF; transition: .3s ease-out; } .btn-login:hover { color: #FFF; background: rgb(158, 140, 84); } /*-----------omask*/ .login_popup .mask { position: absolute; top: 50%; left: 40%; margin-left: 0px; margin-top: -200px; width: 350px; height: 237px; background-color: rgba(255,255,255,1.00); overflow: hidden; padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px; } /*-----------close*/ .login_popup .mask i { position: absolute; width: 20px; height: 20px; font-size: 20px; top: 20px; right: 11px; z-index: 999; color: #2F4456; } .login_popup .mask i:hover { color: #0E1A23; } .login_popup .mask i a { display: block; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } .login_popup h3 { color: #FFF; font-size: 2em; margin-top: 0px; margin-bottom: 15px; } /*-----------LOGIN*/ .login_popup .mask .login_table { position: absolute; top: 0px; padding: 20px; } .login_popup .mask .login_table a { color: #ccc; transition: .3s ease-out; } .login_popup .mask .login_table a:hover { color: #FFF; } .login_popup .mask .login_table table, .login_popup .mask .forget_table table { width: 100%; } .login_popup .mask .login_table table td { width: 100%; text-align: center; } .login_popup .mask .login_table tr:nth-child(4) td { padding-top: 60px; } /* END LOGIN BUTTON */
Code:
<script> // LOGIN Popup $(function() { $(".btn-login").click( function() { $(".login_popup").fadeIn(), "easeOutExpo"; $(".overlay").fadeIn(), "easeOutExpo"; return false; } ) $(".overlay").click( function() { $(".login_popup").fadeOut(), "easeOutExpo"; $(".login_table").delay(400).animate({ left: 0 }, 600, "easeOutExpo"); $(".forget_table").delay(400).animate({ left: 400 }, 600, "easeOutExpo"); return false; } ) $(".fa-times-remove").click( function() { $(".login_popup").fadeOut(), "easeOutExpo"; $(".login_table").delay(400).animate({ left: 0 }, 600, "easeOutExpo"); $(".forget_table").delay(400).animate({ left: 400 }, 600, "easeOutExpo"); return false; } ) }) </script>
Except: If you don't use fontawesome yet on your forum, then you also need to add it.
Just place
Code:
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
or if this does not work you need to place
Code:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Comment