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
.modal-trigger class and a
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 modal trigger inside a modal to open a new modal over the last one. 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.|