<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="bs-example"> <!-- Button HTML (to Trigger Modal) --> <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a> <!-- Modal HTML --> <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Login & Register</h4> </div> <div class="modal-body"> <div class="col-md-6 col-sm-6 no-padng"> <div class="model-l"> <form method="post" id="logFrm" class="log-frm" name="logFrm"> <ul> <li>Email</li> <li> <input type="text" placeholder="User ID" id="userName" name="userName" class="form-control" onfocus="checkNullProf();"></li> <li>Password</li> <li><input type="password" placeholder="Password" id="password" name="password" class="form-control" onfocus="checkNullProf();"></li> <li><br/><button type="button" onclick="userLogin();" id="logBtn" class="btn btn-default">Submit</button></li> <div style="display:none;" id="loginFail" class="sign"> <li> <font color="red"> Username or password is incorrect.</font></li> </div> </ul> </form> <div class="clearfix"></div> <form method="post" id="logFrm1" class="log-frm" name="logFrm1"> <ul> <li> <a class="for-got" onclick="ayantoggle();" href="javascript:;">Forgot your password?</a> <div class="forgot"> <ul> <li><p>Enter your Email Address here to receive a link to change password.</p></li> <li>Email Id</li> <li><input type="text" placeholder="Your email id" id="forgetemailId" class="form-control" name="forgetemailId"></li> <li><button type="button" class="btn btn-default" onclick="forgot();">Send Mail</button></li> </ul> </div> </li> </ul> </form> </div> </div> <div class="col-md-6 col-sm-6 no-padng"> <div class="model-r"> <div class="o-r"> <span>OR</span> </div> <form method="post" id="userRegisterFrm" class="log-frm" name="userRegisterFrm"> <ul> <li>First Name</li> <li><input type="text" placeholder="First Name" name="fName" class="form-control"></li> <li>Last Name</li> <li><input type="text" placeholder="Last Name" name="lName" class="form-control"></li> <li>Email</li> <li><input type="text" placeholder="Email Id" name="emailId" class="form-control"></li> <li>Password</li> <li><input type="password" placeholder="Password" name="password" class="form-control"></li> <li>Confirm Password</li> <li><input type="password" placeholder="Confirm Password" name="repassword" class="form-control"></li> <br> <li><button type="button" name="userRegBtn" class="btn btn-default">Signup Now</button></li> <div style="display:none;" class="sign greenglow"> <li> <i class="icon-check"></i><br> <font color="red"> User registration successful.<br> Your login Url already send to your email. </font></li> </div> <div style="display:none;" id="regnSuc11" class="sign redglow"> <li> <i class="icon-mail"></i><br> <font color="red"> Email Exist.</font></li> </div> </ul> </form> </div> </div> <div class="clearfix"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> </div> </div>

.log-frm { } .log-frm ul { margin: 0 !important; padding: 0 !important; } .log-frm ul li { color: #666; display: block; font-size: 14px; line-height: 25px; } .log-frm ul li a { color: #f47521; cursor: pointer; display: block; padding: 10px 0; } .log-frm ul li p { border: 1px solid #ccc; color: #666; font-size: 12px; line-height: 18px; margin: 10px 0; padding: 2px 5px; } .log-frm ul li input[type="text"] { border: 1px solid #ccc; border-radius: 0; color: #000; display: block; font-size: 13px; line-height: 19px; margin-bottom: 10px; width: 100%; } .model-l { padding-right: 0px; } .model-r .o-r { background: #fff none repeat scroll 0 0; border: medium none; border-radius: 100%; bottom: 0; height: 40px; margin: auto; overflow: hidden; position: absolute; left: -19px; top: 0; width: 40px; z-index: 99999; } .model-r .o-r span { background: #fff none repeat scroll 0 0; border: 2px solid #ccc; color: #666; display: block; height: 100%; padding: 8px 0 0; text-align: center; width: 100%; border-radius: 100%; display:block; position: relative; } .model-r { padding-left: 30px; position: relative; border-left: 1px dotted #cccccc; } .forgot { display: none; }

function ayantoggle(){ $(".forgot").slideToggle('slow'); } //$(document).ready(function(){ // $(".for-got").click(function(){ // // }); //});