javascript - 使用 jQuery 更改模态内容

Question

我正在使用 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>

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

我相信这涉及 javascript/jQuery，但我想不出任何方法来解决这个问题。请赐教。非常感谢!

Answer 1

褪色示例

$("#modal2Button").click(function() {
  $('#modal1').fadeOut();
  setTimeout(function() {
    $('#modal2').fadeIn();
  }, 400)
});


$("#close-button").click(function() {
  setTimeout(function() {
    $('#modal1').fadeIn();
    $('#modal2').fadeOut();
  }, 1000)

});

.hide-me {
  display: none;
}

.show-me {
  display: block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Click Me
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal Header</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <!--         Modal 1 Content Here -->
        <div class="show-me" id='modal1' }>
          <h1>THIS IS MODAL 1</h1>
        </div>

        <!--Modal 2 Content Here-->
        <div class='hide-me' id='modal2'>
          <h1>Content for 2nd Modal</h1>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="close-button">Close</button>
        <button type="button" class="btn btn-primary" id="modal2Button">
  Continue
</button>
      </div>
    </div>
  </div>
</div>

立即切换示例

$("#modal2Button").click(function() {
  $('#modal2').removeClass('hide-me').addClass('show-me')
  $('#modal1').removeClass('show-me').addClass('hide-me')
});


$("#close-button").click(function() {
  setTimeout(function(){
  $('#modal1').removeClass('hide-me').addClass('show-me')
  $('#modal2').removeClass('show-me').addClass('hide-me')
  },1000)
  
});

.hide-me {
  display: none;
}

.show-me {
  display: block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Click Me
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal Header</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <!--         Modal 1 Content Here -->
        <div class="show-me" id='modal1' }>
          <h1>THIS IS MODAL 1</h1>
        </div>

        <!--Modal 2 Content Here-->
        <div class='hide-me' id='modal2'>
          <h1>Content for 2nd Modal</h1>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="close-button">Close</button>
        <button type="button" class="btn btn-primary" id="modal2Button">
  Continue
</button>
      </div>
    </div>
  </div>
</div>