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-online-builder.png

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

javascript-prompt-replacement-modal-dialog-rounded-css-theme.png

  • 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