ModalButtonComponent

ModalButtonComponent can be attached to a button-like element to open a modal dialog box.

ModalButtonComponentOptions

Option	Type	Description	Default
modalOpenAttr	{string}	Attr name used on the button to determine which modal to open.	data-modal-open
modalIdAttr	{string}	Attr name used to identify which element to grab the modal contents from. The first child element of that parent element that matches the modal id will be placed into the modal of the modal when opened.	data-modal-id
enableHashHistory	{boolean}	If enabled, opening a modal dialog will push a hash url to html5 history. When opening a new page with a #hash in the url, the modal will automatically open.	false
onOpen	{function}	A callback function that's called when the modal is opened.	false
onClose	{function}	A callback function that's called when the modal is closed.	false

Example

Press the button below to open the "foo" modal dialog.

This is the contents of "foo" modal.

HTML

<button class="modal-button" data-modal-open="foo">Open "foo" modal</button>
<div data-modal-id="foo">
  <div class="foo">
    This is the contents of "foo" modal.
  </div>
</div>

SASS

@import 'airkit2/modal/modal'

.foo
  background-color: #fff
  left: 50%
  padding: 80px 120px
  position: absolute
  top: 50%
  transform: translateX(-50%) translateY(-50%)

JavaScript

import {Registry} from 'airkit2';
import {ModalButtonComponent} from 'airkit2/modal';


const app = new Registry();
const modalOptions = {enableHashHistory: true};
app.register('modal-button', ModalButtonComponent, modalOptions);
document.addEventListener('DOMContentLoaded', () => {
  app.run();
});