Предупреждение о модальном закрытии

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

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

1 3
warnings modal-dialog bootstrap-modal

1 ответ:

Предполагая, что у вас есть 2 модала

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

  2. И используя bootstrap default modal Behavior data-toggle и data-target для вызова первого модального (с формой)

Важно:

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

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

Изменения:

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

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

  3. Добавьте класс closefirstmodal в форму Modal Header / Footer Close button, чтобы вызвать предупреждение modal с помощью jQuery click function и слушатель модальных событий bootstrap

  4. Добавить класс confirmclosed в предупреждение модальные Confirm close Button, которые будем использовать, чтобы закрыть обе формы / предупреждение модальные глаголы с на jQuery нажмите кнопку функция и скрывать модальные через 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 (Вы можете пропустить прослушиватель событий, но я предпочитаю этот способ) 

//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
            });
        });
    });
});

Пример скрипки-1

JS без модального события B. S Слушатель 

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

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

Пример Скрипки-2

4