This represents a modal dialog module. The modal module is predefined with an inner template. It comes with 3 variations of content: Simple, Complex and Video.
- @veams/core - Veams Core Framework.
- @veams/query or
jquery- Veams Query or jQuery. - @veams/component - Veams Component.
veams install component modalveams -i c modal| Parameter | Type | Value | Description |
|---|---|---|---|
| settings.modalContextClass | String | default |
- Context class of component. |
| settings.modalClasses | String | - Modifier classes for component. | |
| settings.modalJsOptions | Object | - JavaScript options which gets stringified. | |
| content.describedBy | String | - Aria attribute for detailed description. |
The module gives you the possibility to override default JS options:
| Parameter | Type | Value | Description |
|---|---|---|---|
| closeBtn | String | '['[data-js-item="modal-close-btn"]']' |
Define the close button for the modal. |
| backdrop | String | '['[data-js-item="modal-backdrop"]']' |
Define the backdrop for modal. |
| classes | Object | { hidden: 'is-hidden', open: 'is-open', visible: 'is-modal-visible' } |
Define the modifiers for modal. |
There are multiple global variables which you can change:
| Parameter | Default Value | Description |
|---|---|---|
| $modal-z | 100 !default |
Define the z-index of the backdrop. |
| $modal-bg-color | #000 !default |
Background color of backdrop. |
| $modal-content-color | #fff !default |
Background color of modal content. |
| $modal-font-size: | 16px !default |
Modal Font size. |
| $modal-line-height: | 1.4 !default |
Modal Font Line Height. |
| $modal-font-family: | Arial, sans-serif !default |
Modal Font Family. |
You can add the following modifiers to modal:
| Class | Description |
|---|---|
| is-modal-visible | Define the axis overflow of the modal |
| is-hidden | Hide the modal |
| is-open | Show the modal |