別の2つのポップアップウィンドウを作成するにはどうすればいいですか？

Question

「パスワードを忘れた」というポップアップが表示されます。そのウィンドウにはユーザ名&のメールボックスが表示されています。私はすでにログイン用のポップアップを作成しました。同じdivで忘れたパスワードウィンドウを作成することは可能ですか？

HTMLコード

<li><a id="modal-launcher" data-toggle="modal" data-target="#login-modal"><i class="fa fa-user"></i> Sign in</a></li> 

HTMLコード

<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header login_modal_header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h3 class="modal-title" id="myModalLabel">Login to Your Account</h3> 
     </div> 
     <div class="modal-body login-modal center-block"> 
      <p>By signing in, you agree to FOCUS 40's Terms and Conditions and Privacy Policy.</p> 
      <br/> 
      <div class="clearfix"></div> 
      <div id='social-icons-conatainer'> 
       <div class='modal-body-left'> 
        <div class="form-group"> 
         <input type="text" id="username" placeholder="Enter your name" value="" class="form-control login-field"> 
         <i class="fa fa-user login-field-icon"></i> 
        </div> 

        <div class="form-group"> 
         <input type="password" id="login-pass" placeholder="Password" value="" class="form-control login-field"> 
         <i class="fa fa-lock login-field-icon"></i> 
        </div> 

        <a href="#" class="btn btn-custom modal-login-btn center-block">Login</a> 
        <br/> 
        <a href="#" class="login-link center-block">Lost your password?</a> 
       </div> 
      </div>                            
     </div> 

     <div class="modal-footer login_modal_footer"> 
     </div> 
    </div> 
</div> 

div要素の1の非表示と表示を切り替えるにはjqueryのを使用してCSSコード

.login_modal_footer{margin-top:5px;} 
.login_modal_header .modal-title {text-align: center; } 
.form-group{position: relative;} 
.form-group .login-field-icon {font-size: 20px; position: absolute; right: 15px; top: 3px; transition: all 0.25s ease 0s; padding-top: 2%;} 
.login_modal_header, .login_modal_footer {background: #F4F4F2 !important;color:#666;} 
.login-modal input{height:40px; box-shadow: none; border:1px solid #ddd;} 
.login-link{text-align:center; /*color:#ED6347;*/} 
#center-line{position: absolute; right: 265.7px;top: 80px;background:#ddd; border: 4px solid #DDDDDD;border-radius: 20px;} 
.modal-login-btn{width:50%;height:35px; margin-bottom:10px; text-align:center;} 
#modal-launcher { cursor:pointer;} 
#login-modal {margin-top:100px;} 
.modal-body {padding:5% 10%;} 

Answer 1

をポップアップログインして1つとforgで1つotパスワードHTML。以下はサンプルデモです。

$(function(){ 
 
    
 
    $('#lostPass').on('click',function(){ 
 
    $('#signinWrapper').hide(); 
 
    $('#ForgotPassWrapper').show(); 
 
    }); 
 

 
    $('#backTologin').on('click',function(){ 
 
    $('#ForgotPassWrapper').hide(); 
 
    $('#signinWrapper').show(); 
 
    }); 
 
    
 
});

.login_modal_footer { 
 
    margin-top: 5px; 
 
} 
 
.login_modal_header .modal-title { 
 
    text-align: center; 
 
} 
 
.form-group { 
 
    position: relative; 
 
} 
 
.form-group .login-field-icon { 
 
    font-size: 20px; 
 
    position: absolute; 
 
    right: 15px; 
 
    top: 3px; 
 
    transition: all 0.25s ease 0s; 
 
    padding-top: 2%; 
 
} 
 
.login_modal_header, 
 
.login_modal_footer { 
 
    background: #F4F4F2 !important; 
 
    color: #666; 
 
} 
 
.login-modal input { 
 
    height: 40px; 
 
    box-shadow: none; 
 
    border: 1px solid #ddd; 
 
} 
 
.login-link { 
 
    text-align: center; 
 
    /*color:#ED6347;*/ 
 
} 
 
#center-line { 
 
    position: absolute; 
 
    right: 265.7px; 
 
    top: 80px; 
 
    background: #ddd; 
 
    border: 4px solid #DDDDDD; 
 
    border-radius: 20px; 
 
} 
 
.modal-login-btn { 
 
    width: 50%; 
 
    height: 35px; 
 
    margin-bottom: 10px; 
 
    text-align: center; 
 
} 
 
#modal-launcher { 
 
    cursor: pointer; 
 
} 
 
#login-modal { 
 
    margin-top: 100px; 
 
} 
 
.modal-body { 
 
    padding: 5% 10%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<li><a id="modal-launcher" data-toggle="modal" data-target="#login-modal"><i class="fa fa-user"></i> Sign in</a> 
 
</li> 
 

 
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header login_modal_header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
     <h3 class="modal-title" id="myModalLabel">Login to Your Account</h3> 
 
     </div> 
 
     <div class="modal-body login-modal center-block"> 
 
     <div id="signinWrapper"> 
 
      <p>By signing in, you agree to FOCUS 40's Terms and Conditions and Privacy Policy.</p> 
 
      <br/> 
 
      <div class="clearfix"></div> 
 
      <div id='social-icons-conatainer'> 
 
      <div class='modal-body-left'> 
 
       <div class="form-group"> 
 
       <input type="text" id="username" placeholder="Enter your name" value="" class="form-control login-field"> 
 
       <i class="fa fa-user login-field-icon"></i> 
 
       </div> 
 

 
       <div class="form-group"> 
 
       <input type="password" id="login-pass" placeholder="Password" value="" class="form-control login-field"> 
 
       <i class="fa fa-lock login-field-icon"></i> 
 
       </div> 
 

 
       <a href="#" class="btn btn-custom modal-login-btn center-block">Login</a> 
 
       <br/> 
 
       <a id="lostPass" href="#" class="login-link center-block">Lost your password?</a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div id="ForgotPassWrapper" style="display:none;"> 
 
      <div class="form-group"> 
 
      <input type="text" placeholder="Enter your User name" value="" class="form-control login-field"> 
 
      <button id="sendLink" class="btn btn-primary">Send reset link</button> 
 
       <button id="backTologin" class="btn btn-default">back to login</button> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="modal-footer login_modal_footer"> 
 
     </div> 
 
    </div> 
 
    </div>

注：彼らは上のクリックしたときにを表示フルスクリーンモードでデモ