Jquery позволяет создавать прототипы через свойство $.fn по сути это псевдоним prototype для любого jquery объекта. Для примера реализуем вызов кастомных модальных окон по аналогии с модалками в bootstrap с отправкой триггеров по событию открытия и скрытия окна.
const MODAL_CLASS = '.modal'; const MODAL_ATRRIBUTE = 'data-modal'; const MODAL_DISMISS_LOCAL_SELECTORS = '.modal__close, .modal__shadow'; const MODAL_DISMISS_GLOBAL_SELECTOR = '[data-dismiss=modal]'; $.fn.modal = function (action) { action = action || 'show'; switch (action) { case 'hide': $(this).fadeOut('fast', function () { !$(MODAL_CLASS + ':visible').length && $('body').removeClass('overflow'); }); $(this).trigger('hide'); break; case 'show': $(this).fadeIn('fast'); $(this).trigger('show'); break; } } $(document).on('show hide', MODAL_CLASS, function (e) { switch (e.type) { case 'hide': $("[data-modal=" + e.target.id + "]").removeAttr('disabled'); break; case 'show': $('body').addClass('overflow'); break; } }); $(document).on('click', '[' + MODAL_ATRRIBUTE + ']:not([disabled])', function (e) { e.preventDefault(); let id = $(this).data('modal'); $('[data-modal=' + id + ']').attr('disabled', true); $('#' + id).modal(); }); $(document).on('click', MODAL_DISMISS_LOCAL_SELECTORS, function (e) { e.preventDefault(); $(this).parents(MODAL_CLASS).modal('hide'); }); $(document).on('click', MODAL_DISMISS_GLOBAL_SELECTOR, function (e) { let id = $(this).data('modal'); id ? $(MODAL_CLASS).not('#' + id).modal('hide') : $(MODAL_CLASS).modal('hide'); });