如何使用jquery或javascript模拟hide.bs.modal而不使用 Bootstrap

4nkexdtk  于 2023-02-28  发布在  Java
关注(0)|答案(1)|浏览(115)

我用的是jquery 1.11,老代码,我试着模拟hided.bs.modal,最后是hided.bs.modal,show.bs.modal和shown.bs.modal。
代码:

(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`);
});

我的假设,显然是不正确的,是当我使用

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

我的$. fn. modal. hide函数会被触发。事实并非如此。但是我的$. fn. hide函数确实触发了。我没有收到任何错误。只是我期望触发的函数没有触发。
我该怎么做呢?
谢谢你。

rjjhvcjd

rjjhvcjd1#

我不知道我们是否遇到了同样的问题,但有时我会遇到这样的问题,有时$( #addProductModal ).modal( show )工作正常,但这从来都不起作用$( #addProductModal ).modal( hide )
我做了些调查我发现这是最适合我的方式

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');

相关问题