Подтвердить что ты не робот

Как reset загрузочный модальный, когда он закрывается, и снова открывать его снова?

У меня есть список в модуле bootstrap и кнопке. При нажатии кнопки появляется новая кнопка внутри div в модальном режиме. Когда я закрываю модальный и снова открываю его, последняя операция, выполняемая в модальном стиле, как кнопка, представленная ранее, все еще присутствует в модальном режиме.

Как reset модальный, чтобы при возобновлении модальности кнопка не присутствовала, и пользователь снова может выбрать опцию из списка и нажать кнопку, чтобы отобразить новую кнопку и т.д.

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Select Language</h4>
              </div>
              <div class="modal-body">                

                <button type="button" class="btn" data-dismiss="modal">Close</button>                    
                <button type="button" class="btn" id="submit_form">Submit</button>

              <div class="modal-body1">
                <div id="placeholder-div1">
                </div>                    
              </div>

              </div>

              <div class="modal-footer">


              <script>                    
                $('#submit_form').on('click', function() {
                    $(".modal-body1").html('<h3>test</h3>');
                });                                    
              </script>

              <script>                    
                $(function(){                    
                    $('.modal-footer').click(function() {
                       $('.modal').modal('hide');        
                    });                          
                }); 
              </script>

              </div>

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

- Обновить ---

Почему это не работает?

              <script type="text/javascript">  
                $(function(){  
                      $('#myModal').on('hidden.bs.modal', function (e) {
                      console.log("Modal hidden");
                      $("#placeholder-div1").html("");
                    });
                });

              </script>
4b9b3361

ОТВЕТЫ

Ответ 1

Просто reset любое содержимое вручную, когда модальное скрыто:

$(".modal").on("hidden.bs.modal", function(){
    $(".modal-body1").html("");
});

Больше событий. Подробнее о них здесь

$(document).ready(function() {
  $(".modal").on("hidden.bs.modal", function() {
    $(".modal-body1").html("Where did he go?!?!?!");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class='modal-body1'>
          <h3>Close and open, I will be gone!</h3>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Ответ 2

Что помогло мне, было положить следующую строку в готовую функцию:

$(document).ready(function()
{
    ..
    ...

    // codes works on all bootstrap modal windows in application
    $('.modal').on('hidden.bs.modal', function(e)
    { 
        $(this).removeData();
    }) ;

    ...
    ..
});

Когда модальное окно будет закрыто и открыто снова, предыдущие введенные и выбранные значения будут reset до начальных значений.

Я надеюсь, что это тоже поможет!

Ответ 3

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

var originalModal = $('#myModal').clone();
$(document).on('#myModal', 'hidden.bs.modal', function () {
    $('#myModal').remove();
    var myClone = originalModal.clone();
    $('body').append(myClone);
});

Ответ 4

В reset все поля ввода в модальном режиме используют следующее.

$(".modal-body input").val("")

Ответ 5

Здесь альтернативное решение.

Если вы делаете много изменений в DOM (добавление/удаление элементов и классов), может быть несколько вещей, которые должны быть "reset". Вместо того, чтобы очищать каждый элемент при закрытии модала, вы можете reset весь модальный каждый раз, когда он снова открывается.

Пример кода:

(function(){

    var template = null

    $('.modal').on('show.bs.modal', function (event) {
        if (template == null) {
            template = $(this).html()
        } else {
            $(this).html(template)
        }
        // other initialization here, if you want to
    })

})()

Вы все равно можете написать свое начальное состояние в HTML, не беспокоясь о том, что с ним произойдет позже. Вы можете написать свой код UI JS, не беспокоясь о необходимости его очистки позже. Каждый раз, когда модаль перезапускается, он будет reset до того же самого состояния, в котором он был в первый раз.

Edit: Здесь версия, которая должна обрабатывать несколько модалов (я ее не тестировал)...

(function(){

    $('.modal').on('show.bs.modal', function (event) {
        if (!$(this).data('template')) {
            $(this).data('template', $(this).html())
        } else {
            $(this).html($this.data('template'))
        }
        // other initialization here, if you want to
    })

})()

Ответ 6

вы можете попробовать это

$('body').on('hidden.bs.modal', '.modal', function () {
     $(this).removeData('bs.modal');
});

Он удалит все данные из модели и reset.

Ответ 7

Я использую BS 3.3.7, и у меня есть проблема, когда я открываю модальный, а затем закрываю его, модальное содержимое остается на стороне клиента, а html ("") вообще не понятно. Поэтому я использовал это, чтобы полностью удалить код внутри модального div. Ну, вы можете спросить, почему код с дополнением справа, в хром для окон, когда открывают модальный из другого модального кода и закрывают этот второй модальный вариант с правом на право на 17 пикселей. Надеюсь, это поможет...

$(document)
.on('shown.bs.modal', '.modal', function () { 
    $(document.body).addClass('modal-open') 
})
.on('hidden.bs.modal', '.modal', function () { 
    $(document.body).removeClass('modal-open') 
    $(document.body).css("padding-right", "0px");
 $(this).removeData('bs.modal').find(".modal-dialog").empty();
})

Ответ 8

Пример кода:

 $(document).on('hide.bs.modal', '#basicModal', function (e) {
        $('#basicModal').empty();
    });

Ответ 9

(function(){
        $(".modal").on("hidden.bs.modal", function(){
            $(this).removeData();
        });
});

Это идеальное решение для удаления контакта при скрытии/закрытии бутстрапа.