https://github.com/efiand/unimodal

Модальное окно с произвольной разметкой и стилизацией.
https://github.com/efiand/unimodal

npm-package portfolio-project

Last synced: about 21 hours ago
JSON representation

Модальное окно с произвольной разметкой и стилизацией.

• Host: GitHub
• URL: https://github.com/efiand/unimodal
• Owner: efiand
• Created: 2022-03-11T11:32:47.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-10-15T07:53:19.000Z (about 1 year ago)
• Last Synced: 2024-03-15T10:22:41.153Z (8 months ago)
• Topics: npm-package, portfolio-project
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/unimodal
• Size: 39.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# unimodal [![npm version](https://img.shields.io/npm/v/unimodal.svg)](https://www.npmjs.com/package/unimodal)

Модальное окно с произвольной разметкой и стилизацией.

## Возможности

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

* Блокирование основной прокрутки с сохранением позиции экрана.

* Собственная прокрутка по правой стороне окна при переполнении контентной части.

* Закрытие по `Esc`.

* Запрет выхода фокуса за пределы содержимого модального окна.

## Установка

`npm i -DE unimodal`

## Использование

### Разметка

Элементы разметки помечаются дата-атрибутами с одинаковым значением:

* `data-modal` - на узел модального окна.

* `data-modal-open` - на все узлы, открывающие это окно.

* `data-modal-close` - на все узлы, закрывающие это окно.

### Стили

Для выравнивания содержимого по вьюпорту рекомендуются следующие стили: [modal.css](https://efiand.github.io/unimodal/modal.css).

Если используются postcss-import и БЭМ-блок `modal`, можно импортировать часть переиспользуемых стилей модального окна:

```css

@import url("../node_modules/unimodal/modal.css");

```

### Использование готового скрипта

```html

  window.MODAL_PREFIX = 'modal--'; // modal-- - значение по уполчанию

```

### Кастомное подключение модуля в систему сборки

```js

import Modal from 'unimodal';

for (const modalElement of document.querySelectorAll('[data-modal]')) {

  new Modal(modalElement, 'modal--'); // modal-- - значение по уполчанию

}

```

или:

```js

import { initModals } from 'unimodal';

initModals('modal--'); // modal-- - значение по уполчанию

```

Второй параметр конструктора - префикс имён классов-модификаторов:

* `*ready` - для стилизации модальных особенностей. Полезно для прогрессивного улучшения, когда до загрузки JS модальное окно в потоке.

* `*opened` - для стилизации состояния открытого окна.