To initialize the Javascript, see the instructions in the <b>Setup</b> section at the top of the navigation.

Through Volta.js, the basic way of using modals is to add `data-modal="modalId"` along with the `Vlt-modal-trigger` class to your trigger button. 

If you need finer control over when the modal is to open or dismiss, you can create the modal in JavaScript:

```javascript
var myModal = Volta.modal.create('modalID')
```

Once you've declared the modal you can use the following functions:

```javascript
myModal.open()
myModal.dismiss()
```

<hr class="hr--tall">

# Reference table

<div class="Vlt-table Vlt-table--data">
|Class/attribute |	Behaviour|
|---|---|
|`data-callback`| A callback function to be executed when the modal is dismissed. If the user clicks the .Vlt-modal__confirm button true will be passed to the callback|
|`data-disable-esc`| When passed the value true it will disallow the modal to be dismissed via the ESC key|
|`data-disable-click`| When passed the value true it will disallow the modal to be dismissed via a click outside of the modal |
|`.Vlt-modal`| Wraps the modal, has position: fixed|
|`.Vlt-modal-trigger`| Opens the modal, requires data-modal="modalId"|
|`.Vlt-modal__panel`| Main container of the modal content|
|`.Vlt-modal__header`| Contains the title and the dismiss button|
|`.Vlt-modal__dismiss`| Dismiss button. The icon and style is given via CSS|
|`.Vlt-modal__cancel`| Close the modal, returns false to callback|
|`.Vlt-modal__confirm`| Close the modal, returns true to callback|
|`.Vlt-modal__content`| Body of the panel, between header and footer|
|`.Vlt-modal__footer`| Container for the calls to action|
|`.Vlt-modal_visible`| State that makes the modal appear on page|
|`.Vlt-modal--out`| Modifier that contains the exit transitions|
|`.Vlt-modal--large`| Modifier that makes the modal 630px in width|
</div>