引导模式事件-等待回调完成后再返回

Question

我知道这个问题听起来很天真，但想不出其他标题。

我正在使用一个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。

Answer 1

您需要一个标志来知道访问者是否确认了它。您可以这样做(使用元素的数据(：

$('#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上。