如何在切換時顯示不同的Bootstrap模態

Question

我正在使用Bootstrap模態。我有兩種模式。當用戶點擊「忘記密碼」鏈接時，第一模式會切換/打開第二模式對話框。第二個模態與第一個模態相同，除了body。

我想做什麼，從第一模式切換到第二模式，第二模式將出現不同的頁眉和頁腳。可能嗎？我怎樣才能擁有這個功能？

我的代碼：

<div class="container"> 
    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog" data-backdrop="static" data-keyboard="false"> 
    <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header" style="padding:35px 50px; background-color: whitesmoke"> 
      <button type="button" class="close" data-dismiss="modal"> 
      <span title="close" class="glyphicon glyphicon-remove"></span> 
      </button> 
      <h2><span class="glyphicon glyphicon"></span> Login to our site</h2> 
      <p>Enter username and password to log on:</p> 
     </div> 
     <div class="modal-body" style="padding:40px 50px;"> 
      <div id="modalTab"> 
      <div class="tab-content"> 
       <div class="tab-pane active" id="login"> 
       <form role="form"> 
        <div class="form-group"> 
        <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label> 
        <input type="text" class="form-control" id="usrname" placeholder="Enter email"> 
        </div> 
        <div class="form-group"> 
        <label for="psw"><span class="glyphicon glyphicon-pencil"></span> Password</label> 
        <!--<div class="inner-addon right-addon"> 
    </div>--> 
        <input type="password" class="form-control" id="password" placeholder="Enter password"> 
        <i style="cursor: pointer" id="seePass" title="Click here to see password" class="glyphicon glyphicon-eye-open"></i> 
        </div> 
        <div class="checkbox"> 
        <label> 
         <input type="checkbox" value="" checked>Remember me</label> 
        </div> 
        <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button> 
       </form> 
       </div> 
       <div class="tab-pane fade" id="forgotpassword"> 
       <form method="post" action='' name="forgot_password"> 
        <p>Send us your email and we'll reset it for you!</p> 
        <input type="text" name="eid" id="email" placeholder="Email"> 
        <p> 
        <button type="submit" class="btn btn-primary">Submit</button> 
        <a href="#login" data-toggle="tab">Wait, I remember it now!</a> 
        </p> 
       </form> 
       </div> 
      </div> 
      </div> 
     </div> 
     <!--End Body--> 
     <div class="modal-footer" style="background-color: whitesmoke"> 
      <!--<button type="submit" class="btn btn-danger btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>--> 
      <p class="text-center">Not a member? <a href="form_signup.php">Sign Up</a></p> 
      <p class="text-center">Forgot <a href="#forgotpassword" data-toggle="tab">Password?</a></p> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

在這裏，你走了，我希望這個代碼可以幫助你：

<link href="~/Content/bootstrap.css" rel="stylesheet" /> 
<script src="~/Scripts/jquery-1.10.2.js"></script> 
<script src="~/Scripts/bootstrap.js"></script> 
<script type="text/javascript"> 

    $(function() { 
     var showMessage = function (heading, message) { 

      $(".modal-body").empty(); 
      $(".modal-title").empty(); 

      $(".modal-title").html(heading); 
      $(".modal-body").html(message); 

      $('#messageBox').modal('show'); 
     }; 

     $("#popup1").click(function() { 
      showMessage("Heading 1", "Modal popup message 1"); 
     }); 

     $("#popup2").click(function() { 
      showMessage("Heading 2", "Modal popup message 2"); 
     }); 
    }); 
</script> 


<input id="popup1" type="button" value="Show Popup" /> 
<input id="popup2" type="button" value="Show Another Popup" /> 

<div class="modal fade" id="messageBox" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title"></h4> 
      </div> 
      <div class="modal-body"> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

輸出彈出1：

輸出彈出2 ：

只需使用，作爲一個例子，讓你的代碼進行必要的修改，使其工作