The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Quick Login Modal

2 posters

The forum of the forums :: Miscellaneous :: Community Coding and Analysis Zone

Go down

Quick Login Modal Empty Quick Login Modal

Post by mSyx September 15th 2021, 9:47 am

Hey there,
Here's another one.

Quick Login Modal Ahyp8m3

JAVASCRIPT
» In all the pages

Code:
$(function(){
 
$('a.mainmenu[href="/login"]').on('click', function(e) {
  e.preventDefault(e);
  $('.fl_container').fadeIn('100');
  $('.fl_black').fadeIn('100');
});
 
$('.fl_black').on('click', function() {
  $('.fl_container').fadeOut('100');
  $(this).fadeOut('100');
});
 
});

TEMPLATES
In overall_header, find:
Code:
{JAVASCRIPT}

Add the following code right after:
Code:
<!-- BEGIN switch_user_logged_out -->
<div class="fl_black"></div>
<div class="fl_container">
<div class="fl_content">
<form action="/login" method="post" name="form_login">

   <div class="fl_username">
      <span>Username</span>
      <input type="text" name="username" value="" size="25" maxlength="40" />
   </div>
   
   <div class="fl_password">
      <span>Password</span>
      <input type="password" name="password" size="25" maxlength="32" />
   </div>
   
   <div class="fl_auto">
             <label class="checkon"><span>Stay logged-in</span>
      <input type="checkbox" name="autologin"/>
                <checkmark></checkmark>
                </label>
   </div>
   
   <input type="hidden" name="redirect" value="" />
   <input type="hidden" name="query" value="" />
   
   <div class="fl_submit">
      <input class="mainoption" type="submit" name="login" value="Log in" />
   </div>
   
   <div class="fl_register">
      Don't have an account yet?
      <a href="/register">Sign Up Now</a>
   </div>
   
</form>
</div>
</div>
<!-- END switch_user_logged_out -->

CSS
Code:
.fl_container {
    position: fixed;
    z-index: 999;
    display: none;
    background-color: #f6f9fdF9;
    left: 30vw;
    top: 30vh;
    width: 30vw;
    height: auto;
    box-sizing: border-box;
    padding: 2%;
    box-shadow: 0 0 50px 5px #00000050;
    text-align: center;
    min-width: 400px;
}

.fl_content {
    text-align: left;
    display: inline-block;
}

.fl_username span, .fl_password span {
    font-size: 11pt;
    color: #003074;
    font-family: 'Roboto', sans-serif;
    display: block;
    font-weight: 500;
}

.fl_container input[type="password"], .fl_container input[type="text"] {
    margin: 10px 0;
    background-color: white !important;
    padding: 10px 0 10px 40px;
    border-radius: 8px;
    outline: none;
    font-size: 10pt;
    border: 1px solid #e9eef3;
    color: #071c3a;
    width: 100%;
    box-sizing: border-box;
}

.fl_auto {
    padding-left: 3%;
    padding-top: 3px;
}

.fl_auto span {
    color: #0c1625;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    font-size: 9pt;
    vertical-align: text-top;
    margin-left: 3px;
    vertical-align: sub;
}

.fl_register {
    width: 100%;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 10pt;
    color: #0f2561;
    margin-top: 10%;
}

.fl_register a {
    text-decoration: none;
    font-weight: 600;
    color: #0f2561;
    margin-left: 5px;
}

.fl_submit input {
    background-color: #003074;
    color: white;
    border: none;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 10px;
    font-size: 11pt;
    font-weight: 500;
    border-radius: 6px;
    opacity: .75;
    cursor: pointer;
    transition: all .25s ease-in-out;
}
.fl_submit input:hover {
    opacity: 1;
}

.fl_submit {
    text-align: center;
    margin-top: 2vh;
}


label.checkon {
    position: relative;
    padding-left: 30px;
}

label.checkon * {
    transition: all .4s ease-in-out;
}

.checkon input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

checkmark {
    position: absolute;
    top: 4px;
    left: 10px;
    height: 18px;
    width: 18px;
    background-color: #eee;
}

.checkon:hover input ~ checkmark {
  background-color: #ccc;
}

.checkon input:checked ~ checkmark {
  background-color: #00bf71;
}

checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkon input:checked ~ checkmark:after {
  display: block;
}

.checkon checkmark:after {
    left: 6px;
    top: 4px;
    width: 3px;
    height: 6px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(
45deg
 );
    -ms-transform: rotate(45deg);
    transform: rotate(
45deg
 );
}

.fl_black {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: .3;
    display: none;
}
mSyx
mSyx
Forumember

Male Posts : 155
Reputation : 47
Language : French & English
Location : France

https://help.forumotion.com/

Shek, SarkZKalie, TonnyKamper and Mimóza like this post

Back to top Go down

Quick Login Modal Empty Re: Quick Login Modal

Post by SarkZKalie September 17th 2021, 6:07 pm

Thank you for sharing us Quick Login Modal 1f607


Quick Login Modal Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1418
Reputation : 220
Language : English

https://rotavn.forumotion.com/

TonnyKamper, mSyx and Mimóza like this post

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: Miscellaneous :: Community Coding and Analysis Zone

 
Permissions in this forum:
You cannot reply to topics in this forum