I’m using this code to make a Bootstrap 3.4.1 modal non-closable — to not allow the user to click outside the modal or use Esc to close it, while still allowing the normal .modal("hide") and data-dismiss="modal" to work:
$('#myModal').removeData('bs.modal')
.modal({
backdrop: 'static',
keyboard: false
});
This is from this comment on an answer: Disallow Twitter Bootstrap modal window from closing
However, I’m struggling to reverse the above. Just passing in the opposite options won’t work; the modal remains non-closable:
$("#myModal").modal({
backdrop: true,
keyboard: true
});
With help from the SO JavaScript chat (thanks @matt), I also tried using the hide.bs.modal handler, wherein I’d read a data-allow-close attribute within to determine if I should allow closing via keyboard/mouse:
attachNonClosableModalHideHandler: function() {
const $self = $(this);
$("#myModal").on("hide.bs.modal", $self.handleNonClosableModalHide);
},
handleNonClosableModalHide: function () {
return $(this).data("allow-close");
}
Here’s the modal’s main DIV tag:
<div id="myModal" class="modal default fade" tabindex="-1"
role="dialog" data-allow-close="true">...</div>
However, the above handler prevents calls to $("#myModal").modal("hide") from working because I now need to set the allow-close data attribute before doing so. Also, the data-dismiss="modal" buttons within the modal won’t work for the same reason.
I created this jQuery plugin to call as a wrapper for hiding the modal but it’s all becoming cumbersome:
$.fn.hideNonClosableModal = function () {
const $self = $(this);
const hasClass = $self.hasClass("modal");
const hasRole = $self.attr("role") === "dialog";
if (!hasClass || !hasRole) {
return this;
}
$self.data("allow-close", true);
$self.modal("hide");
return this;
};
It shouldn’t be this difficult to make a modal closable again. What am I doing wrong? Thanks.
