Обновление модального окна при его последующем открытии Modal Bootstrap?

Question

[Руслан Дасаев]

Добрый день!
При нажатии на кнопку с классом dream в модальном окне

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

при помощи скрипта сделал так, чтобы исчезал modal-body и вместо него после modal-header появлялся modal-form для отправки заявки, который лежит изначально вне модального окна.

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


      });

 
      });

    </script>

сама форма

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

После закрытия модалки и ее последующем открытии выскакивает результат отыгранного ранее скрипта, а нужно чтобы после закрытия она возвращалась в исходное состояние.Как решить данную проблему?Никак не получается.Элементарный возврат значений дисплея не срабатывает.

Answer 1

[eRKa]

У бутстраповского модального окна есть ряд тригеров: перед открытием окна show.bs.modal, после открытия shown.bs.modal, перед закрытием окна hide.bs.modal, после закрытия hidden.bs.modal.

Обработайте событие hidden.bs.modal

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

Подробнее здесь

Comments

[Руслан Дасаев]

Спасибо за ваш ответ!
Такой код помог возвратить в исходное состояние модалку

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


      });
         $('#more_roll').on('hidden.bs.modal', function () {
                    $('.modal-body').css('display','block');
                    $('.modal-form').css('display','none');
              }); 

 
      });

    </script>

Как добить эту модалку?Теперь после каждого проигрывания скрипта количество форм увеличевается!!Сначала 1 потом 4 потом 16.

[eRKa]

Cloud47, ну так конечно. Вы каждый раз при клике добавляете новую
$('.modal-header').after(modalOn);
Вы ее один раз добавьте до всех кликов.

И при закрытии окна форму нужно не скрывать
$('.modal-form').css('display','none');
А приводить в дефолтное состояние, очистить поля формы, тогда отпадет надобность вот в этом
$('.modal-form').css('display','block');

[Руслан Дасаев]

АА.Не понял вас, напишите код.Пошел учить jquery