https://github.com/wide/modulus-modal
Modal component for Modulus
https://github.com/wide/modulus-modal
modulus
Last synced: 13 days ago
JSON representation
Modal component for Modulus
- Host: GitHub
- URL: https://github.com/wide/modulus-modal
- Owner: wide
- License: mit
- Created: 2020-05-29T15:05:17.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2022-02-16T13:21:08.000Z (almost 4 years ago)
- Last Synced: 2025-09-28T13:37:05.368Z (5 months ago)
- Topics: modulus
- Language: JavaScript
- Homepage:
- Size: 30.3 KB
- Stars: 0
- Watchers: 7
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Modulus Modal
Enhanced modal component, to be used with `@wide/modulus`.
## Install
```
npm install @wide/modulus-modal --save
```
## Usage
Register this component using `Modulus`:
```js
import modulus from '@wide/modulus'
import Modal from '@wide/modulus-modal'
modulus.component('modal', Modal)
```
Import base `scss` styles:
```scss
@use '@wide/modulus-modal';
```
And use the provided `twig` template:
```twig
{% embed '@wide::modulus-modal' with { id: 'modalOne' } %}
{% block content %}
HEY!
{% endblock %}
{% embed %}
```
Or build your own `html`:
```html
HEY!
```
## Open modal
To open the modal from a button:
```html
Open Modal One
```
To open the modal programmatically:
```js
import { seek } from '@wide/modulus'
seek('modalOne').open()
```
## Default focused element
To choose which element will be focused when opening, add `data-focus` attribute:
```html
Confirm
```
By default, if there is no `data-focus` attribute defined, the first element of type above will be focused.
- `button` (excluding close button)
- `a` (with `[href]` attribute)
- `input`
- `select`
- `textarea`
- Element with `[tabindex]` attribute (with value different of `[tabindex="-1"]`)
- Close button
## Libraries
This package uses :
- [`hotkeys-js`](https://github.com/jaywcjlove/hotkeys)
## Authors
- **Aymeric Assier** - [github.com/myeti](https://github.com/myeti)
- **Julien Martins Da Costa** - [github.com/jdacosta](https://github.com/jdacosta)
## License
This project is licensed under the MIT License - see the [licence](licence) file for details