Enhanced modal component, to be used with `@wide/modulus`.
npm install @wide/modulus-modalEnhanced modal component, to be used with @wide/modulus.
```
npm install @wide/modulus-modal --save
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!
To open the modal from a button:
`html`
To open the modal programmatically:
`js
import { seek } from '@wide/modulus'
seek('modalOne').open()
`
To choose which element will be focused when opening, add data-focus attribute:`html`
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
- [tabindex]
- Element with attribute (with value different of [tabindex="-1"])
- Close button
This package uses :
- hotkeys-js`
- Aymeric Assier - github.com/myeti
- Julien Martins Da Costa - github.com/jdacosta
This project is licensed under the MIT License - see the licence file for details