ブートストラップモーダルダイアログが表示されない

Question

3番目の表示に問題があります。パスワードを忘れました。それは2番目のモーダルからリンクされています。パスワードを忘れました

最初の2つのモーダルは正常です。私はタグからdata-dismiss = "modal"を削除すれば3番目はうまくいきます。もし私がdata-dismiss = "modal"をタグにつけているのであれば、アプリのバックグラウンドが暗い（最初の2つのモーダルのように）が、パスワードを忘れるためのモーダル/ダイアログはないということだけが起こります。

誰かが添付

<form method="post" id="singupform"> 
<div class="modal" id="singupModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"></div> 
      <button class="close" data-dismiss="modal">&times;</button> 
      <h4 id="myModalLabel">Sign up today and start using app</h4> 
      <div class="modal-body"> 
       <div class="form-group"> 

        <!-- Sign up meesage errors --> 
        <div id="signupMessage"> 
        </div> 

        <label for="username" class="sr-only">Username</label> 
        <input type="text" name="username" id="username" class="form-control" placeholder="Username" maxlength="30"> 
       </div> 

       <div class="form-group"> 
        <label for="email" class="sr-only">Email</label> 
        <input type="email" name="email" id="email" class="form-control" placeholder="Email Adress" maxlength="50"> 
       </div> 

       <div class="form-group"> 
        <label for="password" class="sr-only">Password</label> 
        <input type="password" name="password" id="password" class="form-control" placeholder="Choose a password" maxlength="20"> 
       </div> 

       <div class="form-group"> 
        <label for="password2" class="sr-only">Confirm Password</label> 
        <input type="password2" name="password2" id="password2" class="form-control" placeholder="Confirm password" maxlength="20"> 

       </div> 
      </div> 

      <div class="modal-footer"> 
        <input class="btn blue" name="signup" type="submit" value="Sign up"> 
        <button type="button" class="btn btn-default" data-dismiss="modal"> Cancel</button> 
      </div> 
     </div> 
    </div> 
</div> 

<form method="post" id="loginform"> 
<div class="modal" id="loginModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"></div> 
      <button class="close" data-dismiss="modal">&times;</button> 
      <h4 id="myModalLabel">Login :</h4> 

      <div class="modal-body"> 
       <div class="form-group"> 

        <!-- Sign up meesage errors --> 
        <div id="loginMessage"> 

        </div> 
       <div class="form-group"> 
        <label for="loginemail" class="sr-only">Email</label> 
        <input type="email" name="loginemail" id="loginemail" class="form-control" placeholder="Email Adress" maxlength="50"> 
       </div> 

       <div class="form-group"> 
        <label for="loginpassword" class="sr-only">Password</label> 
        <input type="password" name="loginpassword" id="loginpassword" class="form-control" placeholder="Password" maxlength="20"> 
       </div> 

       <div class="checkbox"> 
        <label><input type="checkbox" name="rememberme" id="rememberme">Remember me</label> 

        <a class="pull-right " style="cursor: pointer;" data-dismiss="modal" href="#forgotpasswordModal" data-toggle="modal">Forgot Password ?</a> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <input class="btn blue" name="login" type="submit" value="Login"> 
       <button type="button" class="btn btn-default" data-dismiss="modal"> Cancel</button> 
       <button type="button" class="btn btn-default pull-left" data-dismiss="modal" data-target="#singupModal" data-toggle="modal"> Register</button> 
      </div> 
     </div> 
    </div> 

</div> 

<form method="post" id="forgotpasswordform"> 
<div class="modal" id="forgotpasswordModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"></div> 
      <button class="close" data-dismiss="modal">&times;</button> 
      <h4 id="myModalLabel">Forgot Password ? Enter your email address : </h4> 

      <div class="modal-body"> 
       <div class="form-group"> 

        <!-- Sign up meesage errors --> 
        <div id="forgotMessage"> 

        </div> 
        <div class="form-group"> 
         <label for="loginemail" class="sr-only">Email</label> 
         <input type="email" name="loginemail" id="loginemail" class="form-control" placeholder="Email Adress" maxlength="50"> 
        </div> 
       </div> 
       <div class="modal-footer"> 
        <input class="btn blue" name="login" type="submit" value="Login"> 
        <button type="button" class="btn btn-default" data-dismiss="modal"> Cancel</button> 
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal" data-target="#singupModal" data-toggle="modal"> Register</button> 

       </div> 
      </div> 
     </div> 

    </div> 

Answer 1

DEMOチェックしてくださいすることができ：ログインで最後のdivタグを、パスワードモーダルを忘れてはミスですあなたのフォームをより良い構文のためにモーダルの中に入れてください。

$(document).ready(function(){ 
 
$("#loginModal").on("show.bs.modal",function(){ 
 
$("#singupModal").modal("hide"); 
 
}); 
 
$("#forgotpasswordModal").on("show.bs.modal",function(){ 
 
$("#loginModal").modal("hide"); 
 
}); 
 
});

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

 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#singupModal"> 
 
     singupModal 
 
    </button> 
 

 
    <div class="modal" id="singupModal" role="dialog" aria-labelledby="singupModal" aria-hidden="true"> 
 

 
     <form method="post" id="singupform"> 
 
      <div class="modal-dialog"> 
 
       <div class="modal-content"> 
 
        <div class="modal-header"></div> 
 
        <button class="close" data-dismiss="modal">&times;</button> 
 
        <h4 id="singupModal">Sign up today and start using app</h4> 
 
        <div class="modal-body"> 
 
         <div class="form-group"> 
 

 
          <!-- Sign up meesage errors --> 
 
          <div id="signupMessage"> 
 
          </div> 
 

 
          <label for="username" class="sr-only">Username</label> 
 
          <input type="text" name="username" id="username" class="form-control" placeholder="Username" maxlength="30"> 
 
         </div> 
 

 
         <div class="form-group"> 
 
          <label for="email" class="sr-only">Email</label> 
 
          <input type="email" name="email" id="email" class="form-control" placeholder="Email Adress" maxlength="50"> 
 
         </div> 
 

 
         <div class="form-group"> 
 
          <label for="password" class="sr-only">Password</label> 
 
          <input type="password" name="password" id="password" class="form-control" placeholder="Choose a password" maxlength="20"> 
 
         </div> 
 

 
         <div class="form-group"> 
 
          <label for="password2" class="sr-only">Confirm Password</label> 
 
          <input type="password2" name="password2" id="password2" class="form-control" placeholder="Confirm password" maxlength="20"> 
 

 
         </div> 
 
        </div> 
 

 
        <div class="modal-footer"> 
 
         <input class="btn blue" name="signup" type="submit" value="Sign up"> 
 
         <button type="button" class="btn btn-default" data-dismiss="modal"> Cancel</button> 
 
         <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#loginModal"> 
 
          loginModal 
 
         </button> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </form> 
 
    </div> 
 

 
    <div class="modal" id="loginModal" role="dialog" aria-labelledby="loginModal" aria-hidden="true"> 
 
     <form method="post" id="loginform"> 
 
      <div class="modal-dialog"> 
 
       <div class="modal-content"> 
 
        <div class="modal-header"></div> 
 
        <button class="close" data-dismiss="modal">&times;</button> 
 
        <h4 id="loginModal">Login :</h4> 
 

 
        <div class="modal-body"> 
 
         <div class="form-group"> 
 

 
          <!-- Sign up meesage errors --> 
 
          <div id="loginMessage"> 
 

 
          </div> 
 
          <div class="form-group"> 
 
           <label for="loginemail" class="sr-only">Email</label> 
 
           <input type="email" name="loginemail" id="loginemail" class="form-control" placeholder="Email Adress" maxlength="50"> 
 
          </div> 
 

 
          <div class="form-group"> 
 
           <label for="loginpassword" class="sr-only">Password</label> 
 
           <input type="password" name="loginpassword" id="loginpassword" class="form-control" placeholder="Password" maxlength="20"> 
 
          </div> 
 

 
          <div class="checkbox"> 
 
           <label><input type="checkbox" name="rememberme" id="rememberme">Remember me</label> 
 

 
           <a class="pull-right " style="cursor: pointer;" data-dismiss="modal" href="#forgotpasswordModal" data-toggle="modal">Forgot Password ?</a> 
 
          </div> 
 
         </div> 
 
         <div class="modal-footer"> 
 
          <input class="btn blue" name="login" type="submit" value="Login"> 
 
          <button type="button" class="btn btn-default" data-dismiss="modal"> Cancel</button> 
 
          <button type="button" class="btn btn-default pull-left" data-dismiss="modal" data-target="#singupModal" data-toggle="modal"> Register</button> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </form> 
 
    </div> 
 

 
    <div class="modal" id="forgotpasswordModal" role="dialog" aria-labelledby="forgotpasswordModal" aria-hidden="true"> 
 
     <form method="post" id="forgotpasswordform"> 
 
      <div class="modal-dialog"> 
 
       <div class="modal-content"> 
 
        <div class="modal-header"></div> 
 
        <button class="close" data-dismiss="modal">&times;</button> 
 
        <h4 id="forgotpasswordModal">Forgot Password ? Enter your email address : </h4> 
 

 
        <div class="modal-body"> 
 
         <div class="form-group"> 
 

 
          <!-- Sign up meesage errors --> 
 
          <div id="forgotMessage"> 
 

 
          </div> 
 
          <div class="form-group"> 
 
           <label for="loginemail" class="sr-only">Email</label> 
 
           <input type="email" name="loginemail" id="loginemail" class="form-control" placeholder="Email Adress" maxlength="50"> 
 
          </div> 
 
         </div> 
 
         <div class="modal-footer"> 
 
          <input class="btn blue" name="login" type="submit" value="Login"> 
 
          <button type="button" class="btn btn-default" data-dismiss="modal"> Cancel</button> 
 
          <button type="button" class="btn btn-default pull-left" data-dismiss="modal" data-target="#singupModal" data-toggle="modal"> Register</button> 
 

 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </form> 
 
    </div>