Popup dialog for displaying information.
npm install @bgoodman/dialog-box
yarn add @bgoodman/dialog-box<!DOCTYPE html>
<html>
<head>
<title>dialog-box</title>
<script type="module" src="./dist/index.js"></script>
</head>
<body>
<dialog-box open="true" confirm-lbl="Continue">
<div slot="dialog-title">
Title Heading
</div>
<div slot="dialog-content">
Hello, test test test
blah
</div>
</dialog-box>
</body>
</html>The element's class constructor can also be used.
constructor DialogBox(opts?: {
title?: string | undefined;
content?: string | undefined;
confirmBtn?: {
include?: boolean | undefined;
lbl?: string | undefined;
} | undefined;
cancelBtn?: {
include?: boolean | undefined;
lbl?: string | undefined;
} | undefined;
closeOnConfirm?: boolean | undefined;
} | undefined): DialogBox<script type="module">
import DialogBox from "./dist/index.js";
const dialogBox = new DialogBox({title: "Test Title", content: "Test content"});
document.querySelector("body").appendChild(dialogBox);
dialogBox.open = true;
dialogBox.addEventListener("confirmed", (e) => console.log(e))
dialogBox.addEventListener("cancelled", (e) => console.log(e))
</script>The dialog is visible when true. May also be set via the element property open.
If true, the dialog will close when the default confirmation button is clicked. Default true.
If true, the default confirmation button will be rendered. Default true.
Override the default confirmation button label. Default "OK".
If true, the default cancellation button will be rendered. Default true.
Override the default cancellation button label. Default "Cancel".
Gets the current title or can be set to a new value;
Gets the current content or can be set to a new value;
Emitted on click of default confirmation button.
Emitted on click of default cancel button.