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.
A modal can be opened with a falling effect using the
.modal-falling class on the modal
A modal can be opened with a bouncing effect using the
.modal-bouncing class on the modal
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.
|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.|
Enable / disable overlay, works only if overlay option is enabled.
|ax.modal.setup||Event sent when the modal has been setup.|
|ax.modal.open||Event sent when the
|ax.modal.opened||Event sent when the modal has been opened.|
|ax.modal.close||Event sent when the
|ax.modal.closed||Event sent when the modal has been closed.|
|CSS Variable||Default value||Description|
||10%||Modal top offset.|
||80%||Modal maximum height.|