How to display different Bootstrap Modal on toggling

Question

I am working on Bootstrap Modal. I have two modals. The First Modal toggles/open the second modal dialog, when the user clicks on "Forgot Password" link. The second modal is the same as the first one except body.

What I want to do, on toggling from first modal to second one, the second modal will appear with different header and footer. Is it possible? How can I have this feature?

My code:

<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

Here you go, I hope this code helps you:

<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>

Output Popup 1:

Output Popup 2:

Just use that as an example and make the necessary changes to your code to make it work