Changing Modal content using jQuery

Question

I am using twitter bootstrap's modal to make a pop up form.

This is the following code that shows the modal form.

First Modal Form

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

Second Modal Form

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

The above codes produces a caption "Continue". Two buttons cancel and Continue below. I am trying to make the two buttons dynamic. What I am about to do here is that when cancel is clicked, the modal will close . When continue is clicked, the body will change dynamically to the other modal content.

I believe there is javascript/jQuery involve in this but I can't think of any way to work around this. Please enlighten me. Thanks a lot!

First, both modal have same id, and that will lead to unintended behavior. To answer, you could call a jQuery function that just switch the content of the two modals, basically using the second modal as a “hidden html container” — Davide Vitali, Mar 05 '19 at 17:30
Sorry but I’m on the phone now; you should search documentation for jQuery.append() method, and keep in mind that what you want to do is storing the content of the first modal’s body in a temp variable, empty it, append the content of the second modal’s body to the first one, empty the second modal’s body and append the temp variable to it. You don’t necessarily need to keep the second body in an actual modal, it could just be a hidden div tag. Oh, and don’t forget the “preventDefault” method on the “continue” button click, otherwise your modal will close. Good Luck :) — Davide Vitali, Mar 05 '19 at 17:40

Dhaval Jardosh · Accepted Answer · 2019-03-06T17:43:23.513

Fading Example

$("#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>

IMMEDIATE TOGGLE EXAMPLE

$("#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>

Thanks, is there a way I can fade out and fade in the other content — Ojay, Mar 06 '19 at 17:24

Changing Modal content using jQuery

1 Answers1

Fading Example

IMMEDIATE TOGGLE EXAMPLE

Linked