# jquery.lhmodal

> Jquery plugin for modals

Latest version **3.1.0** (published 2016-10-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install jquery.lhmodal
pnpm add jquery.lhmodal
yarn add jquery.lhmodal
bun add jquery.lhmodal
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2016-10-27 |
| First published | 2016-10-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | leshiple |
| Maintainers | leshiple |

## Links

- npm: https://www.npmjs.com/package/jquery.lhmodal
- Repository: https://github.com/leshiple/jquery.lhmodal
- Homepage: https://github.com/leshiple/jquery.lhmodal#readme
- Issues: https://github.com/leshiple/jquery.lhmodal/issues
- npm.io page: https://npm.io/package/jquery.lhmodal

## Dependencies (1)

- [jquery](https://npm.io/package/jquery.md) ^3.1.1

## Recent versions

- 3.1.0 (latest) — 2016-10-27
- 3.0.0 — 2016-10-25
- 2.1.0 — 2016-10-25
- 2.0.0 — 2016-10-17
- 1.2.2 — 2016-10-06
- 1.2.1 — 2016-10-06
- 1.1.0 — 2016-10-04

## README

# jquery.lhModal
Плагин для создания модальных окон. Позволяет открывать несколько 
модальных окон одновременно без появления 'косяков'

## Установка
`npm install jquery.lhModal --save`

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

`$('.modal').lhModal();` - инициализация плагина;
`$('.modal').lhModal('show');` - показать модальное окно;

## Настройки

### Селекторы модального окна
В плагине реализована возможность изменения имен классов для каждого
элемента модального окна

| Опция         | Значение по-умолчанию | Описание                                                      |
| ------------- |:---------------------:| --------------------------------------------------------------|
| modalDialog   | `.modal__dialog`      | Фон модального окна при клике на который закрывается это окно |
| modalContent  | `.modal__content`     | Контейнер контентной части модального окна                    |
| modalClose    | `.modal__close`       | Кнопка закрытия                                               |

При открытии модального окна элементу `body` добавляется класс `has-open-lhModal` который запрещает
прокрутку документа c помощью `overfow:hidden`. Изменить название класса можно с помощью опции
`bodyWithOpenModal`.

Пример
```javascript
$('#modal').lhModal({
    modalDialog: '.dialog',
    modalContent: '.content',
    modalClose: '.close',
    bodyWithOpenModal: 'body-ovh' //!тут указывается имя класса, без точки
 });
```


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

| Опция         | Значение по-умолчанию | Описание                                               |
| ------------- |:---------------------:| -------------------------------------------------------|
| modalIn       | `.modal_in`           | CSS класс добавляемый при появлении модального окна    |
| modalOut      | `.modal_out`          | CSS класс добавляемый при исчезновении модального окна |
| duration      | `500`                 | Продолжительность анимации, в миллисекундах            |


Поддерживаются эффекты библиотеки [animate.css](https://daneden.github.io/animate.css/). Для этого
необходимо подключить саму библиотеку, выставить необходимое значение опции `duration` и в файле
`jquery.lhModal.scss` классам `.modal_in` и `.modal_out` (или на тем которые были установлены) добавить
свойства `animation-name` соответствующие названиям анимации библиотеки [animate.css](https://daneden.github.io/animate.css/)

Пример
```javascript
$('#modal').lhModal({
    modalIn: '.modal_show',
    modalOut: '.modal_hide',
    duration: 1000,
 });
```

### События

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


Пример
```javascript
$('#modal').on('show.lhModal', ()=>{
    console.log('show modal');
});
```

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

Пример
`$('#modal').lhModal('show');`


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

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

Пример
`$.lhModal.closeAll();`

---
_Source: https://npm.io/package/jquery.lhmodal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._