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