signalizejs/dialog

Installation

• dom/ready
• event
• mutation-observer

const {
	dialog,
	openDialog,
	closeDialog
 } = await signalize.resolve('dialog');

API

dialog

dialog('my-dialog');

• Get dialog element by id => dialog="my-dialog"

openDialog

openDialog('my-dialog');

• Open dialog by id => dialog="my-dialog"

openDialog('my-dialog', {
	modelessly: true,
	closable: false
});

Options:

• modelessly: Calls show instead of showModal.
• closable: Prevents a dialog from being closed. Usefull for dialogs like Cookie Overlay.

closeDialog

closeDialog('my-dialog');

• Close dialog by id => dialog="my-dialog"

Directives

The Dialog module comes with the Signalize default installation. You just need to import it.

<dialog dialog="my-dialog">
    Hello World!<br><br>
    <button dialog-close="my-dialog">Close</button>
</dialog>

<button dialog-open="my-dialog">Open Dialog</button>

<script type="importmap">{
  "imports": {
    "signalizejs": "https://cdn.jsdelivr.net/npm/signalizejs/+esm",
    "signalizejs/dom/ready": "https://cdn.jsdelivr.net/npm/signalizejs/dom/ready/+esm",
    "signalizejs/event": "https://cdn.jsdelivr.net/npm/signalizejs/event/+esm",
    "signalizejs/mutation-observer": "https://cdn.jsdelivr.net/npm/signalizejs/mutation-observer/+esm",
    "signalizejs/dialog": "https://cdn.jsdelivr.net/npm/signalizejs/dialog/+esm"
  }
}</script>

<script type="module">
    import Signalize from 'signalizejs';

    const { resolve } = new Signalize();
    await resolve('dialog');
</script>

Available Directives

• dialog: Is used as an id for dialog
• dialog-close: Is used to close dialog after click dialog-close="dialog-id"
• dialog-open: Is used to open dialog after click dialog-open="dialog-id"
• dialog-modeless: If this attribute is set, it will open modeless dialog

Available Directives

• dialog: Used as an ID for the dialog element (replace with id).
• dialog-close: Used to close the dialog after click (dialog-close is enough) => dialog-close="dialog-id"
• dialog-open: Used to open the dialog after click (dialog-open=“dialog-id” is enough) => dialog-open="dialog-id"
• dialog-modeless: If set, opens a modeless dialog (link to modeless dialog).

Dispatched Events

You can listen to the following events through the on method:

• dialog:closed: Dispatched when a dialog is closed
• dialog:opened: Dispatched when a dialog is opened

URL Hash

• The Dialog module watches the URL hash for changes
• If a dialog with the given URL hash is found (e.g., example.com#my-dialog), it will be automatically opened.