Announcement

Collapse
No announcement yet.

Login Button that opens as Popup

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Login Button that opens as Popup

    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

    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>
    Then I added the following Code to the additional_CSS

    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 */
    Then I added the following Code to the footer template right before closing body tag:

    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>
    Thats all

    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);
    right on top of your additional CSS Style

    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">
    right on top of your head_include template in admincp


    #2
    Thanks for sharing shining.

    You don't have to edit the footer template to add the Javascript code at the bottom of the page. You can create a new template and paste the Javascript there and then use it in a template hook in footer_before_body_end hook location. This is one of the ways to create a vB5 mod.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


    • shining
      shining commented
      Editing a comment
      Oh didnΒ΄t know that ...

    • shining
      shining commented
      Editing a comment
      What do I have to add to the template in order to show/load it only for logged out users (or other user groups in other cases )

    #3
    i will saw it thank you

    Comment


      #4
      Originally posted by shining View Post
      What do I have to add to the template in order to show/load it only for logged out users (or other user groups in other cases )
      You could look into header template and use the condition of login:

      Code:
      </head>
      <vb:if condition="!$user OR $user['userid'] < 1">
          {vb:set isLoggedout, ' logged-out'}
      <vb:else />
          {vb:set isLoggedout, ''}
      </vb:if>
      My forum closed !

      Comment

      Users Viewing This Page

      Collapse

      There is 1 user viewing this forum topic.

      • Guest Guest

      Latest Posts

      Collapse

      Working...
      X
      Searching...Please wait.
      An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

      Please push the back button and reload the previous window.'
      An unexpected error was returned: 'Your submission could not be processed because the token has expired.

      Please push the back button and reload the previous window.'
      An internal error has occurred and the module cannot be displayed.
      There are no results that meet this criteria.
      Search Result for "|||"