DayPilot Modal Dialog

Flexible modal dialog library with advanced form building options and an online modal dialog designer.

Install from NPM:

npm install @daypilot/modal

Display a modal dialog:

import {Modal} from "@daypilot/modal";

// ...

const form = [
  {name: "Name", id: "name"}
];

const data = {
  name: "John"
};

const modal = await Modal.form(form, data);
console.log(modal.result);

Online Modal Dialog Builder

Modal Dialog Builder: Build a custom modal dialog using an online application!

Overview

• Display a form in a modal dialog: you can build the form using the API or generate the code using the online builder  - form()

• Drop-in replacements for built-in dialogs - alert(), confirm(), prompt()

• Display custom HTML in a modal dialog - showHtml()

• Display another page in a modal dialog (iframe-based) - showUrl()

Modal Dialog Features

• The background is masked using a semi-transparent div

• The modal window is draggable

• Auto-stretching width and height to fit the content

• Allows styling using CSS themes

• The default theme uses minimal styling to allow easy integration with your global CSS

• Responsive and mobile-friendly

Dynamic Form Building

• Great for prototyping

• Form fields defined using a JSON object

• Data defined using a JSON object

• Updated data object available on close

API

• Minimal typing required (defaults are used when possible)

• TypeScript definitions included

• API documentation