How do I emulate hide.bs.modal without bootstrap using jquery or javascript

Question

I'm using jquery 1.11. Old code. I'm trying to emulate hide.bs.modal and eventually, hidden.bs.modal, show.bs.modal and shown.bs.modal.

Code:

(function($) {
    var oldshow = $.fn.show;
    var oldhide = $.fn.hide;

    $.fn.show = function() {
        return oldshow.apply(this, arguments);
    };

    $.fn.modal.hide = function() { // <--never triggers
        console.log(`hiding modal 1: `, this);
        oldhide.apply(this, arguments);
        return this.modal.hidden.apply(this, arguments);
    };

    $.fn.hide.modal = function() { // <--never triggers
        console.log(`hiding modal 2: `, this);
        oldhide.apply(this, arguments);
        return this.modal.hidden.apply(this, arguments);
    };

    $.fn.hide = function() { // <---this triggers
        console.log(`hiding modal 3: `, this);
        oldhide.apply(this, arguments);
        return this.modal.hidden.apply(this, arguments);
    };

    $.fn.modal.hidden = function() {
        if (this.tagName === `dialog` || this.attr(`role`) === `dialog`) {
            return this.trigger(`modal.hidden`);
        }
    };
})(jQuery);

$(`#addProductModal`).on(`modal.hidden`, function() { // <-- works from $.fn.hide
    console.log(`we triggered on hidden`);
});

My assumption, obviously incorrect, is when I used

$(`#addProductModal`).modal(`hide`) 

that my $.fn.modal.hide function would fire. This is not the case. But my $.fn.hide function does fire. I'm not getting any errors. It's just the function I expected to fire is not firing.

How do I make this work?

Thank you.

Answer 1

This is not close to complete or even correct by any stretch but it's what I needed to do. I was going about defining the functions all wrong.

 (function($) {
    $.fn.modal = function() {
        if (arguments[0] === `hide`) {
            console.log(`hiding`);
            this.attr(`state`, `hidden`).css({"z-index": 0, "display":`none`}).removeClass(`in`);
            if ($(`dialog:visible, [role="dialog"]:visible`).length === 0) {
                $(`.modal-backdrop`).remove();
            }
            return this.trigger(`modal.hidden`);
        }

        if (arguments[0] === `show`) {
            console.log(`showing: `,this);
            if ($(`.modal-backdrop`).length===0) {
                $(`body`).append(`<div class="modal-backdrop fade in"></div>`);
            }
            const modalBackDropZIndex = $(`.modal-backdrop`).css(`z-index`);
            let maxZIndex = +modalBackDropZIndex;
            $(`dialog:visible, [role="dialog"]:visible`).each(function() {
                const thisDlg = $(this);
                if (+thisDlg.css(`z-index`) > maxZIndex) {
                    maxZIndex = +thisDlg.css(`z-index`);
                }
            });
            maxZIndex = Math.max(+modalBackDropZIndex, +maxZIndex) + 100;
            this.attr(`state`, `visible`).css(`z-index`, +maxZIndex).css(`display`,`block`).addClass(`in`);
            return this.trigger(`modal.shown`);
        }
    };

    $.fn.modal.hidden = function() {
        if (this.tagName === `dialog` || this.attr(`role`) === `dialog`) {
            // return this.trigger(`modal.hidden`);
        }
    };

    $.fn.modal.shown = function() {
        if (this.tagName === `dialog` || this.attr(`role`) === `dialog`) {
            // return this.trigger(`modal.shown`);
        }
    };
 })(jQuery);

Answer 2

I don't know if we faced the same problem, but sometime I was stuck with this, sometimes $("#addProductModal").modal("show") works fine but this never works $("#addProductModal").modal("hide").

I did some digging, and I find out this the best way it works for me

function showModal(action) {
  if (action == 'show') {
    $("#your_modal").addClass('show');
    $("#your_modal").css('display', 'block');
  } else {
    $("#your_modal").removeClass('show');
    $("#your_modal").css('display', 'none');
  }
}

// Show the modal
showModal('show');

// Hide the modal
showModal('hide');