Javascript 如何在切换时显示不同的引导模式

我正在研究引导模式。我有两个情态动词。当用户单击“忘记密码”链接时，第一个模式切换/打开第二个模式对话框。第二模态与第一模态相同，只是主体不同

我想做的是，在从第一个模式切换到第二个模式时，第二个模式将显示不同的页眉和页脚。可能吗？我怎样才能拥有这个功能

我的代码：

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

登录我们的网站
输入要登录的用户名和密码：

用户名
密码
记得我吗
登录
将您的电子邮件发送给我们，我们将为您重置


提交

不是会员吗

给你，我希望这段代码能帮助你：

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

$（函数（）{
var showMessage=函数（标题、消息）{
$（“.modal body”）.empty（）；
$（“.modal title”）.empty（）；
$（“.modal title”）.html（标题）；
$（“.modal body”）.html（消息）；
$（'#messageBox'）.modal（'show'）；
};
$（“#popup1”）。单击（函数（）{
showMessage（“标题1”，“模式弹出消息1”）；
});
$（“#popup2”）。单击（函数（）{
showMessage（“标题2”，“模式弹出消息2”）；
});
});
&时代；
接近

输出弹出窗口1:

输出弹出窗口2:

---

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

是的，这是可能的。你可以用jQueryBut来编码，亲爱的？我有一点想法，jquery可以做到这一点，但知识不够@ᴀʀᴛᴜʀғɪʟɪᴘɪᴀᴋ 我不是在要求代码。我只想问一下做这件事的基本想法。到目前为止，我已经在我的问题中发布了我所做的事情。除此之外，我什么都不知道@ᴀʀᴛᴜʀғɪʟɪᴘɪᴀᴋ 我知道如何使用jquery显示/隐藏模态，但不知道如何使用jquery隐藏模态页脚或模态页眉。所以，我很困惑，非常感谢！我一出站就会尝试你建议的代码，然后我会回复你。