javascript - 如何在切换时显示不同的 Bootstrap Modal

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:

仅以此为例，对代码进行必要的更改以使其正常工作