我正在使用twitter bootstrap的模态来制作一个弹出式表单。

这是下面显示模态形式的代码。

第一模态形式

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-dialog1">

      <!-- Modal content-->
      <div class="modal-container">

        <div class="modal-header" id="header-modal">
          <button type="button" class="close-modal" data-dismiss="modal">&times;</button>
          <h4 class="modal-h2">Modal Header</h4>
        </div>

        <div class="modal-body">

          <div class="row">
            <div class="col-md-12">
                <h2 id="modal-info-header">Student's Information</h2>
            </div>  
          </div>

            <div class="row">
              <div class="col-md-12">
                <form role="form">

                  <div class="row">
                    <div class="col-md-6">
                      <div class="modal-form-col1">
                        <label for="guidiantName">First Name</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="First Name">
                      </div>
                    </div>

                     <div class="col-md-6">
                      <div class="modal-form-col2">
                        <label for="guidiantName">Last Name</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Last Name">
                      </div>
                    </div>

                  </div>

                  <div class="modal-form">
                      <label for="guidiantName">Address</label> <br>
                      <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Address">
                  </div>

                  <div class="row">
                    <div class="col-md-6">
                      <div class="modal-form-col1">
                        <label for="guidiantName">Phone Number</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Phone Number">
                      </div>
                    </div>

                     <div class="col-md-6">
                      <div class="modal-form-col2">
                        <label for="guidiantName">State</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="State">
                      </div>
                    </div>

                  </div>

                  <div class="row">
                    <div class="col-md-6">
                      <div class="modal-form-col1">
                        <label for="guidiantName">Next of Kin</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Next of Kin">
                      </div>
                    </div>

                     <div class="col-md-6">
                      <div class="modal-form-col2">
                        <label for="guidiantName">Class</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Class">
                      </div>
                    </div>

                  </div>

                  <div class="col-md-12 text-right">
                    <button id="cancel-btn-modal">Cancel</button>
                    <button id="continue-btn-modal">Continue</button>
                  </div>

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

        </div>
      </div>

    </div>
  </div>

第二模态形式

<!-- Modal -->
  <div class="modal fade" id="Add-Student-Modal" role="dialog">
    <div class="modal-dialog modal-dialog1">

      <!-- Modal content-->
      <div class="modal-container">

        <div class="modal-header" id="header-modal">
          <button type="button" class="close-modal" data-dismiss="modal">&times;</button>
          <h4 class="modal-h2">Modal Header</h4>
        </div>

        <div class="modal-body">

          <div class="row">
            <div class="col-md-12">
                <h2 id="modal-info-header">Guidiant's Information</h2>
            </div>  
          </div>

            <div class="row">
              <div class="col-md-12">
                <form role="form">
                  <div class="modal-form">
                      <label for="guidiantName">Guidiance name</label> <br>
                      <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Guidiance name">
                  </div>

                  <div class="modal-form">
                      <label for="guidiantName">Address</label> <br>
                      <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Address">
                  </div>

                  <div class="row">
                    <div class="col-md-6">
                      <div class="modal-form-col1">
                        <label for="guidiantName">Phone Number</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Phone Number">
                      </div>
                    </div>

                     <div class="col-md-6">
                      <div class="modal-form-col2">
                        <label for="guidiantName">Occupation</label> <br>
                        <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Occupation">
                      </div>
                    </div>

                  </div>

                  <div class="modal-form">
                      <label for="guidiantName">Email Address</label> <br>
                      <input type="text" class="modal-form-input" id="" name="guidiantName" placeholder="Email Address">
                  </div>

                  <div class="col-md-12 text-right">
                    <button id="preview-btn-modal">Preview</button>
                    <button id="save-btn-modal">Save</button>
                  </div>

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

        </div>
      </div>

    </div>
  </div>

上述代码生成标题“Continue”。下面有两个按钮取消并继续。我试图使这两个按钮动态。我在这里要做的是，当单击“取消”时，模式将关闭。单击“继续”时，主体将动态更改为其他模式内容。

我相信有javascript/jQuery涉及到这一点，但我想不出任何方法来解决这个问题。请开导我。非常感谢！