Кастомные(свои) методы jquery

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

 

Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *