Modal
Basic modal
Modals are usefull to display content over your page.
To create a modal, add the .modal class and an ID.
To trigger it, create a button or element with the data-target="" pointing on the modal ID,
and initialize the modal with JS.
A basic modal comes out from its central position.
Note that you can add a new element with data-target="" inside a modal to open a second one over it.
The new overlay will be placed over the last modal too.
Falling modal
A modal can be opened with a falling effect using the .modal-falling class on the modal
element.
Bouncing modal
A modal can be opened with a bouncing effect using the .modal-bouncing class on the modal
element.
Javascript initialization
Once HTML was setup, you can activate the modal with this simple code.
Just pass the id of your modal that you want to activate.
Options
| Property | Default value | Description |
|---|---|---|
| overlay | true | Toggle overlay when modal is active. |
| animationDuration | 400 | Opening and closing animation duration in ms. |
| bodyScrolling | false | Enable or disable bodyScrolling when the modal is active and over content. |
Methods
| Method | Description |
|---|---|
| .open() | Open modal |
| .close() | Close modal |
| .overlay(boolean) |
Enable / disable overlay, works only if overlay option is enabled. Example : modal.overlay(true);
|
Events
| Event | Description |
|---|---|
| ax.modal.setup | Event sent when the modal has been setup. |
| ax.modal.open | Event sent when the open() method is called. |
| ax.modal.opened | Event sent when the modal has been opened. |
| ax.modal.close | Event sent when the close() method is called. |
| ax.modal.closed | Event sent when the modal has been closed. |
Styling
| CSS Variable | Default value | Description |
|---|---|---|
--ax-modal-top
|
10% | Modal top offset. |
--ax-modal-max-height
|
80% | Modal maximum height. |