Enhancement
Modal
Buttons that open a <p-modal>
- Import
@parallelogram-js/core/components/Modal- Selector
[data-modal][data-modal-target]
Playground
Opening a modal
Cancel this booking?
Your table for four on 2 October will be released.
<button type="button" data-modal data-modal-target="#cancel-booking">Cancel booking</button>
<p-modal id="cancel-booking" data-modal-size="sm">
<h2 slot="title">Cancel this booking?</h2>
<p>Your table for four on 2 October will be released.</p>
<div slot="actions">
<button type="button" data-modal-close>Keep booking</button>
<button type="button" data-modal-close>Cancel booking</button>
</div>
</p-modal>Use the example to see the events it sends.
Cancel this booking?
Your table for four on 2 October will be released.
About
Settings belong on the <p-modal>; a trigger only overrides the ones it sets itself, while it has the modal open, and the modal's own values come back when it closes. Opening a modal closes the others unless the trigger allows several, and focus returns to the trigger when the modal closes. Several triggers can open the same modal; every one gets aria-haspopup, aria-controls and an aria-expanded that follows the modal.
Load the <p-modal> element as well; see its page for the dialog itself.
Usage
Register the component and the framework loads it the first time a page contains [data-modal][data-modal-target].
import { Parallelogram } from '@parallelogram-js/core';
const app = Parallelogram.create();
app.components.add('[data-modal][data-modal-target]', () => import('@parallelogram-js/core/components/Modal'));
app.run();The framework is optional. Modal.enhanceAll() mounts the component on every matching element by itself, for a page that wants one enhancement rather than a framework:
import Modal from '@parallelogram-js/core/components/Modal';
Modal.enhanceAll();It takes a selector and the component's options, and returns the instance it mounted them with. What it leaves out is what the framework adds: loading a component only on the pages that use it, mounting again after a page swap, and ordering with dependsOn.
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
data-modal | flag | none | Marks a trigger On the trigger. |
data-modal-targetrequired | selector | none | The <p-modal> to open |
data-modal-size | xs | sm | md | lg | xl | fullscreen | md | Overrides the modal's size For every instance, Modal.defaults.size. |
data-modal-closable | boolean | true | Overrides whether the modal can be closed For every instance, Modal.defaults.closable. |
data-modal-backdrop-close | boolean | true | Overrides whether a backdrop click closes the modal For every instance, Modal.defaults.backdropClose. |
data-modal-keyboard | boolean | true | Overrides whether Escape closes the modal For every instance, Modal.defaults.keyboard. |
data-modal-focus | boolean | true | Return focus to the trigger when the modal closes For every instance, Modal.defaults.focus. |
data-modal-multiple | boolean | false | Leave other open modals open For every instance, Modal.defaults.multiple. |
data-modal-close | flag | none | Closes the modal when clicked On a button inside the modal. |
Events
| Name | Detail | Description |
|---|---|---|
modal:opened | { trigger: HTMLElement; modal: HTMLElement } | Dispatched once on the trigger that opened the modal when it opens. When a script opens the modal, dispatched on its first mounted trigger DOM event and event bus |
modal:closed | { trigger: HTMLElement; modal: HTMLElement } | Dispatched once when the modal has closed, on the same trigger as its modal:opened DOM event and event bus |