Предупреждение об изменении мода

Question

На странице у меня будет загрузочный мод с формой, которая не обязательно будет заполняться за один раз.

Есть ли способ, когда пользователь нажимает кнопку закрытия на модальном, чтобы иметь всплывающее окно предупреждения с подтверждением закрытия и отмена закрытия?

Answer 1

Если у вас есть 2 модальности

1. один для вида (первый модального) и 2-й для предупреждения, чтобы закрыть модальный (обе модальности)

2. и используя самозагрузки поведение модальный по умолчанию data-toggle и data-target для вызова первый модальный (с формой)

Важен:

1. Убедитесь, что вы добавить data-backdrop="static" и data-keyboard="false" в кнопку Форма модального триггера, поэтому он не будет закрыт, когда щелчок вне модального иначе весь раствор бесполезно.

2. Убедитесь, что вы добавили data-backdrop="false" в Warning Modal, поэтому для первого модального варианта будет только одна обратная броня.

Изменения:

1. Удалить data-dismiss="modal" как из верхнего/нижнего колонтитула Close Button Формы модальных

2. Добавить data-dismiss="modal" для предупреждения Modal Cancel Close button только лишь отклонить предупреждение модальный

3. Объявление d класса closefirstmodal в форме модальный верхнего/нижнего колонтитула Close button вызвать предупреждение модальность с jQuery click function и bootstrap modal event listener

4. Добавить класс confirmclosed в предупреждение Modal Confirm close Button, который будет использоваться, чтобы закрыть как Form модальности/Предупреждение с jQuery click function и скрыть как Modal с помощью JQuery $('#Modalselector').modal('hide')

HTML модальных в

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#Form" data-backdrop="static" data-keyboard="false">Open Modal</button> 
<!-- Modal With Form --> 
<div id="Form" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close closefirstmodal">&times;</button> 
       <h4 class="modal-title">Modal Header</h4> 

      </div> 
      <div class="modal-body"> 
       <p>Some Form Elements Here</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default closefirstmodal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 
<!-- Modal With Warning --> 
<div id="Warning" class="modal fade" role="dialog" data-backdrop="false"> 
    <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       <p>This Is A Warning Message</p> 
       <button type="button" class="btn btn-danger confirmclosed">Confirm Close</button> 
       <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

JS с B.S модальной Event Listener (Вы можете пропустить слушателя событий, но я предпочитаю этот способ)

//jQuery and Bootstrap Lib's always comes first 
$(document).ready(function() { //Dom Ready 
    $('.closefirstmodal').click(function() { //Close Button on Form Modal to trigger Warning Modal 
     $('#Warning').modal('show').on('show.bs.modal', function() { //Show Warning Modal and use `show` event listener 
      $('.confirmclosed').click(function() { //Waring Modal Confirm Close Button 
       $('#Warning').modal('hide'); //Hide Warning Modal 
       $('#Form').modal('hide'); //Hide Form Modal 
      }); 
     }); 
    }); 
}); 

Fiddle example-1

JS без B.S модальной Event Listener

$(document).ready(function() { 
    $('.closefirstmodal').click(function() { 
     $('#Warning').modal('show'); 
    }); 

    $('.confirmclosed').click(function() { 
     $('#Warning').modal('hide'); 
     $('#Form').modal('hide'); 
    }); 
}); 

Fiddle Example-2