Jquery позволяет создавать прототипы через свойство $.fn по сути это псевдоним prototype для любого jquery объекта. Для примера реализуем вызов кастомных модальных окон по аналогии с модалками в bootstrap с отправкой триггеров по событию открытия и скрытия окна.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | 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'); }); |