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:

$("#myModal").modal({
    backdrop: true,
    keyboard: true
});

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">

However, the above handler prevents calls to $("#myModal").modal("hide") from working because I now need to set the allow-closedata attribute before doing so. Also, thedata-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.