Refreshing a modal when it is subsequently opened Modal Bootstrap?

Question

JavaScript

Good afternoon!
When clicking on a button with the dream class in a modal window

<div class="modal fade" id="more_roll" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="true" data-keyboard="false">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                
              </div>
              <div class="modal-body">
               <div class="row">
                 
                 <br>
               </div>
               <div class="row">
                <div class="col-sm-5">
                  <div class="fotorama" data-width="100%">
                    <img src="img/types/digitals-techno/digitals-.PNG" alt="">
                    <img src="img/types/digitals-techno/digitals-2.PNG" alt="">
                    <img src="img/types/digitals-techno/digitals-3.PNG" alt="">
                    <img src="img/types/digitals-techno/digitals-4.PNG" alt="">
                  </div>
                </div>
                <div class="col-sm-7">
                  <div class="header_modal_info">
                  <h4 class="site_name"> Сайт Цифровые технологии</h4>
                 </div>
                 <p class="points">Задача</p>
                 <p class="decision">Сделать продающий сайт с уникальным торговым предложением, с доступными формами обратной связи и удобным калькулятором рассчета стоимости. </p>
                 <p class="points">Сроки</p>
                 <p>168 часов(7 дней).</p>
                 <p class="points">Бюджет</p>
                 <p>.</p>
                 <a href="http://digitals.ru" target="blank"><button type="submit">Перейти на сайт</button></a>
                   <button type="submit" class="dream">Хочу такой сайт</button>
   
                </div>
               </div>
              </div>
                
            </div>
          </div>
        </div>

using the script, I made the modal-body disappear and instead, after the modal-header, a modal-form appeared to send the application, which initially lies outside the modal window.

<script>
      $(document).ready(function(){
          $(".dream").click(function(){
            $('.modal-body').css('display','none');
        var modalOn = $('.modal-form').css('display','block');
        $('.modal-header').after(modalOn);


      });

 
      });

    </script>

the form itself

<div class="row">

                  <div class="col-md-12">
                    <form action="mail.php" method="post" style="display: none;" class="modal-form">
                              <!-- Hidden Required Fields -->
                      <input type="hidden" name="project_name" value="">
                      <input type="hidden" name="admin_email" value="">
                      <input type="hidden" name="form_subject" value="Заявка с нижней формы">
                      <!-- END Hidden Required Fields -->
                      
                        <div class="row">
                          <div class="col-md-10 col-md-offset-1">
                            <div class="col-md-6 col-xs-12 input_name" data-wow-delay="0.5s">
                              <input type="text" placeholder="Имя" name="name" class="form-control form_input">
                            </div>
                            <div class="col-md-6 col-xs-12" data-wow-delay="0.5s">
                              <input type="text" placeholder="E-mail" name="E-mail" class="form-control form_input">
                            </div>
                          </div>
                        </div>
                          <div class="row">
                            <div class="col-md-10 col-md-offset-1">
                              <div class="col-md-12">
                                <textarea name="message" cols="10" rows="5" class="form-control form_input" placeholder="Какой у вас проект? Какая у вас задача? Какой сайт вам нужно сделать?"></textarea>
                              </div>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-10 col-md-offset-1">
                              <div class="col-md-12">
                                <!-- <input type="button" class="form-control form_input sendbutton" value="Отправить"> -->
                                <button type="submit" class="sendbuttonmodal">Отправить</button>
                              </div>
                          </div>
                          </div>
                        
                      
                    </form>
                  </div>
                </div>

After closing the modal and its subsequent opening, the result of the previously played script pops up, and after closing it, it must return to its original state. How to solve this problem?

Answer 1

The bootstrap modal window has a number of triggers: before opening the show.bs.modal window, after opening shown.bs.modal, before closing the hide.bs.modal window, after closing hidden.bs.modal.
Handle the hidden.bs.modal event

$('#myModal').on('hidden.bs.modal', function () {
  // здесь .modal-body в дефолтное состояние
})

Read more here