загрузочное модальное событие - дождитесь завершения обратного вызова перед возвратом - PullRequest
Новая
       63

загрузочное модальное событие - дождитесь завершения обратного вызова перед возвратом

0 голосов
/ 07 ноября 2019

Я знаю, что вопрос звучит наивно, но я не мог придумать никакого другого названия.

Я использую одно из bootstrap modal событий hide.bs.modal, которое вызывается прямо перед исчезновением модала, чтобы показатьокно подтверждения. Для обратного вызова требуется логическое значение. 

$('#the-modal').on('hide.bs.modal', function () {
   var self = this;

   $.cofirm("are your sure you want to close", function() { // gets fired if confirmed
       $(self).modal("hide"); // cannot do this,it will fire the event hide.bs.modal over and over.
   });

   return false; // obviously, this gets called first, but that's alright
}

Кроме того, вместо традиционного confirm я использую плагин jquery, который имеет собственный обратный вызов.

$(self).modal("hide"); не можетсделать это, он будет запускать событие hide.bs.modal снова и снова.

1 Ответ

1 голос
/ 07 ноября 2019

Вам нужен флаг, чтобы узнать, подтвердил ли посетитель это или нет. Вы можете сделать это следующим образом (используя данные элемента): 

$('#myModal').on('hide.bs.modal', function() {
    var thisModal = $(this);
    var thisConfirmed = thisModal.data('confirmed');
    if (!thisConfirmed) {
        $.confirm({
            title: 'Are you sure?',
            content: '',
            buttons: {
                confirm: function() {
                    thisModal.data('confirmed', true);
                    thisModal.modal('hide');
                },
                cancel: function() {
                    /* Nothing here */
                }
            }
        });
        return false;
    } else {
    	thisModal.data('confirmed', false);
        return true;
    };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css" rel="stylesheet"/>
<script src="https://getbootstrap.com/docs/4.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://getbootstrap.com/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open modal</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="recipient-name" class="col-form-label">Recipient:</label>
                        <input type="text" class="form-control" id="recipient-name">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="col-form-label">Message:</label>
                        <textarea class="form-control" id="message-text"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Send message</button>
            </div>
        </div>
    </div>
</div>

Также на JSFiddle .

...