3.0.1 • Published 7 years ago

tbody-modal v3.0.1

Weekly downloads
1
License
ISC
Repository
bitbucket
Last release
7 years ago

tbody-modal

Плагин для создания модальных окон. При открытии модального окна фокус переводится на первый элемент формы (если отмечен флаг catchFocus: true). Плагин представляет собой ES6 class.

Установка

npm install tbody-modal --save

##Подключение

import Tbodymodal from 'tbody-modal'

##Вызов

const myModal = new Tbodymodal(selector, settings);

где selector - это селектор форм которые необходимо валидировать, settings - объект настроек

##Пример использования

HTML

<button id="show-modal">Показать модальное окна</button>
<div class="modal">
    <div class="modal__backdrop"></div>
    <div class="modal__content">
        <button class="modal__close" >Закрыть</button>
        <h3>Hello world</h3>
    </div>
</div>

JavaScript

const button = document.getElementById('show-modal');
const myModal = new Tbodymodal('.modal');

button.addEventListener('click', (e) => {
    e.preventDefault(); 
    myModal.show();
});

Настройки

Селекторы модального окна

В плагине реализована возможность изменения имен классов для каждого элемента модального окна и других сопутствующий элементов.

ОпцияЗначение по-умолчаниюОписание
modalContentmodal__contentКонтейнер контентной части модального окна
modalClosemodal__closeКнопка закрытия
bodyWithOpenModalhas-open-tbody-modalКласс добавляемый body для запрета прокрутки

Пример

const myModal = new Tbodymodal('.modal', {
    classNames: {
        modalBackdrop: 'modal__backdrop',
        modalContent: 'modal__content',
        modalClose: 'modal__close',
        bodyWithOpenModal: 'has-open-tbody-modal',
    }
});

Способы закрытия модального окна

Есть возможность изменить способы закрытия окна

ОпцияЗначение по-умолчаниюОписание
backdroptrueКлик по заднему фону модального ок
buttontrueКлик по кнопка заданной через класс modalClose
esctrueНажатие клавиши esc

Пример

const myModal = new Tbodymodal('.modal', {
    closeVariant: {
        backdrop: false,
        esc: false,
    }
});

Анимация

В данном плагине реализована возможность анимирования появления и исчезновения модального окна. Анимация осуществаяется с помощью CSS3 Анимации. Параметры анимации указаны в файле style.css. Добавлены четыре эффекта: slideInTop, slideInLeft, slideOutRight, slideOutDown.

ОпцияЗначение по-умолчаниюОписание
modalInmodal_inКласс добавляемый при появлении модального окна
modalOutmodal_outКласс добавляемый при исчезновении модального окна

Пример

const myModal = new Tbodymodal('.modal', {
    classNames: {
        modalIn: 'modal_in',
        modalOut: 'modal_out',
    }
});

События

СобытиеОписание
tbody-modal.showВызывается перед появлением модального окна
tbody-modal.shownВызывается после появления окна.
tbody-modal.closeВызывается перед исчезновении модального окна
tbody-modal.closedВызывается после исчезновении окна.

Пример

const myModal = new Tbodymodal('.modal');

myModal.DOM.modal.addEventListener('tbody-modal.show', () => {
    console.log('show ');
});

Методы

МетодОписание
showПоказывает модальное окно
closeСкрывает модальное окно

Пример

const myModal = new Tbodymodal('.modal');
myModal.close();

Глобальные методы

Методы

МетодОписание
closeAllСкрывает все модальные окна

Пример

import Tbodymodal from 'tbody-modal'
Tbodymodal.closeAll();
3.0.1

7 years ago

3.0.0

7 years ago

2.2.1

7 years ago

2.2.0

7 years ago

2.1.1

7 years ago

2.1.0

7 years ago

2.0.0

7 years ago

1.0.0

7 years ago