Modal registration form UI

      No Comments on Modal registration form UI

Modal registration form UI using Bootstrap modal and tabs

See the Pen Modal login form UI by scanfcode (@scanfcode) on CodePen.


Modal registration form UI

HTML:

<!-- modal-->
<div class="modal fade" id="myLogin" role="dialog">
   <div class="modal-dialog">    
     <div class="modal-content" id="login_modal">
      <button type="button" class="close" data-dismiss="modal" style="font-size:28px;margin:10px;">&times;</button> 
   <div class="img_login_cnt"><br />
<img src="http://scanfcode.com/wp-content/uploads/2017/04/scanuu.png" class="img_login" alt="scanfcode.com"  />
        </div> 
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <div class="modal-body">
        <h4>Learn coding with us</h4>
          <p>Securely register with Scanfcode</p>
          <hr />
      <div data-toggle="tab" href="#login" class="span_login_button" style="border-right: solid 1px lightgray;">Login</div>
     <div data-toggle="tab" href="#signup" class="span_login_button">Register</div> 
      </div>   
    </div>
<div id="login" class="tab-pane fade">
     <span class="material-icons" id="arrow_modal"  data-toggle="tab" href="#home">&#xe5c4;</span>
       <div class="modal-body">   
       <form class="modal_form_login" method="post" action="#">
       <h4>Login to your scanfcode account</h4>
       <div style="position: relative;">
      <input name="email"  id="innnnn" required />
 <span class="float_label">PHONE/EMAIL</span>
   </div>
  <div style="position: relative;">
          <input  name="password" type="password" class="password" required />
   <span  class="float_label">PASSWORD</span>  
        <br />
 <a type="button" id="showHide">SHOW</a>  
 </div>
       <br />
  <button type="submit">Login</button>
       <br />
 <a href="#" class="forgot_link">Forgot Password?</a>
       </form>
  </div>
    </div>
    <div id="signup" class="tab-pane fade">
       <span class="material-icons" id="arrow_modal"  data-toggle="tab" href="#home">&#xe5c4;</span>
       <div class="modal-body">   
       <form class="modal_form_login" method="post" action="register-request.php">
       <h4>Register with Scanfcode.com</h4>
       <div style="position: relative;">
       <input name="username"  id="innnnn" type="text" required />
       <span  class="float_label">NAME</span>
       </div>
       <div style="position: relative;">
       <input name="email"  id="innnnn" type="email" required />
       <span  class="float_label">EMAIL</span>
       </div>
        <div style="position: relative;">
          <input  name="contact" type="tel" required />
        <span  class="float_label">MOBILE</span>  
        </div>
          <div style="position: relative;">
          <input  name="password" type="password" class="password" required />
        <span  class="float_label">PASSWORD</span>  
        <br />
          <a type="button" id="showHide1">SHOW</a>  
       </div>
       <br />
       <button type="submit">Submit</button>
       <br />
       <a href="#" class="forgot_link">Forgot Password?</a>
       </form>
       </div>
    </div>
   </div>  
  </div>  
 </div>
</div>

<!-- trigger -->
<div class="col-md-12" id="trigger">
  <a data-toggle='modal' data-target='#myLogin' class='btn btn-primary'>LOGIN / SIGNUP</a>
</div>

CSS:

#login_modal
{
  width:70%;border-radius:0px;text-align:center;margin-left:15%;
}
.img_login_cnt
{
    width:100%;text-align:center;
}
.img_login
{
    height:200px;width:400px;padding:20px;margin-top:30px;
}
#home
{
   padding-bottom:50px;
}
#home h4
{
    font-weight:bolder;
}
.span_login_button
{
    
    font-size:25px;color:#666;width:50%;display: inline;float:left;
}
#arrow_modal
{
    position: absolute;top:20px;left:20px;
}
.modal_form_login input
{
    border:solid 1px lightgray;
    height:40px;
    margin:0px;padding:10px 10px 0px 10px;
    color:#666;width:80%;
}

.modal_form_login input:focus
{
    border:solid 1px #2b3f66;
}
.modal_form_login button
{
    width:80%;
    background-color: #2b3f66;
    color:#fff;
    border:solid 1px #2b3f66;
    padding:10px;
    margin:20px 0px;
}
.forgot_link
{
    color:#000;margin:10px 0px;
}
.forgot_link:hover
{
    color:#ffcc00;
}
.float_label
{
 position: absolute;
  margin: 0px 10px;
  bottom:10px;  
  left:40px;
    transition: 0.5s ease all; 
    pointer-events: none;
    color:#ccc;
}
.modal_form_login input:focus ~ .float_label,.modal_form_login input:valid ~ .float_label{
  color:#2b3f66;
  top: 2px;font-size:10px;

}
#showHide,#showHide1
{
    position: absolute;right:45px;bottom:10px;
}
#trigger
{
 padding:3%;
 text-align:center;
}

JS:


 $(document).ready(function () {
 $("#showHide").click(function () {
 if ($(".password").attr("type")=="password") {
 $(".password").attr("type", "text");
 document.getElementById('showHide').innerHTML="HIDE";
 }
 else{
 $(".password").attr("type", "password");
 document.getElementById('showHide').innerHTML="SHOW";
 }
 
 });
  $("#showHide1").click(function () {
 if ($(".password").attr("type")=="password") {
 $(".password").attr("type", "text");
 document.getElementById('showHide1').innerHTML="HIDE";
 }
 else{
 $(".password").attr("type", "password");
 document.getElementById('showHide1').innerHTML="SHOW";
 }
 
 });
 });

Leave a Reply

Your email address will not be published. Required fields are marked *