Modal

</> Show code

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. 

<div class="modal shadow-1 white rounded-3" id="modal-example" data-ax="modal">
  <div class="modal-header">
    Header
  </div>
  <div class="modal-content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores dolorum eum in totam amet soluta! Id distinctio iusto
    voluptatum ipsam officia, odit neque, fuga, commodi totam repellendus deserunt quod laborum? Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Assumenda nostrum doloribus quisquam minima minus animi voluptatum illo illum. Vel, labore iure aut sed nobis
    officiis itaque molestias rerum natus vero.
  </div>
  <div class="modal-footer">
    Footer
  </div>
</div>

<button class="btn rounded-1 primary" data-target="modal-example">Open</button>

Falling modal#

A modal can be opened with a falling effect using the .modal-falling class on the modal element. 

<div class="modal shadow-1 white modal-falling" id="modal-example" data-ax="modal">
  <div class="modal-header">Header</div>

  <div class="divider"></div>

  <div class="modal-content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores dolorum eum in totam amet soluta! Id distinctio iusto
    voluptatum ipsam officia, odit neque, fuga, commodi totam repellendus deserunt quod laborum? Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Assumenda nostrum doloribus quisquam minima minus animi voluptatum illo illum. Vel, labore iure aut sed nobis
    officiis itaque molestias rerum natus vero. <br />
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores dolorum eum in totam amet soluta! Id distinctio iusto
    voluptatum ipsam officia, odit neque, fuga, commodi totam repellendus deserunt quod laborum? Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Assumenda nostrum doloribus quisquam minima minus animi voluptatum illo illum. Vel, labore iure aut sed nobis
    officiis itaque molestias rerum natus vero.
  </div>

  <div class="divider"></div>

  <div class="modal-footer">
    <button data-target="modal-example" class="ml-auto btn shadow-1 rounded-1 btn-small primary">Close</button>
  </div>
</div>

<button class="btn primary rounded-1" data-target="modal-example">Open</button>

Bouncing modal#

A modal can be opened with a bouncing effect using the .modal-bouncing class on the modal element. 

<div class="modal shadow-1 white rounded-3 modal-bouncing" id="modal-example" data-ax="modal">
  <div class="modal-header">
    Header
  </div>
  <div class="modal-content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores dolorum eum in totam amet soluta! Id distinctio iusto
    voluptatum ipsam officia, odit neque, fuga, commodi totam repellendus deserunt quod laborum? Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Assumenda nostrum doloribus quisquam minima minus animi voluptatum illo illum. Vel, labore iure aut sed nobis
    officiis itaque molestias rerum natus vero.
  </div>
  <div class="modal-footer">
    Footer
  </div>
</div>

<button class="btn primary rounded-1" data-target="modal-example">Open</button>

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. 

// NOTE: this is NOT to be used if data-ax="modal" is set in your HTML
let modal = new Axentix.Modal('#modal-example');

// With options
let modal = new Axentix.Modal('#modal-example', {
  overlay: false,
  animationDuration: 500
});
To know all the ways to initialize a JS component, please read the JS Init page.

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#

// NOTE: this is NOT to be used if data-ax="modal" is set in your HTML
let modal = new Axentix.Modal('#modal-example');

// Syntax : modal.{method}
modal.open();
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#

// Listen to all modal instances
document.addEventListener('ax.modal.open', function() {
  // open event !
});

// Listen to only one modal instance
let modalQuery = document.querySelector('#example-modal');
modalQuery.addEventListener('ax.modal.open', function() {
  // open event only on #example-modal
});
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.