# DayPilot Modal

[DayPilot Modal](https://modal.daypilot.org/) - build a modal dialog dynamically from code.

![Modal dialog screenshot](https://modal.daypilot.org/page/image/nodbourhjjh4nntznvuytypefm/daypilot-modal-form-multiple-fields.png)

## What's New

New features and improvements:
* [DayPilot Modal: What's New](https://modal.daypilot.org/history/)

## Dynamic Form Features

* Create a modal dialog with multiple fields programmatically
* Auto-detection of fields from data if no form is specified
* Keyboard support (escape, enter, tab)
* Optional auto-focus on the first item
* Returns the original object with changes merged (additional fields not modified)
* Supported field types: text, date (with optional time), searchable drop-down list, radio list

## Modal Dialog Features

* Displays custom HTML or a standalone page
* Includes one-line replacements for `alert()`, `prompt()` and `confirm()`
* Modal - hides the background with a semi-transparent div
* Draggable
* Auto-stretching to show full content
* Responsive and mobile-friendly
* Minimal styling - will inherit your global styles
* Allows styling using CSS themes

### Build a modal dialog dynamically

Text field

![Text field example](https://modal.daypilot.org/page/image/5opjgycldncbrlpj24udakpjri/daypilot-modal-form-simple.png)

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

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

var data = {
  name: "John"
};

Modal.form(form, data).then(function(args) {
  console.log(args.result);
});
```

Multiple fields

![Modal dialog with multiple fields](https://modal.daypilot.org/page/image/nodbourhjjh4nntznvuytypefm/daypilot-modal-form-multiple-fields.png)

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

var resources = [
  {name: "Resource A", id: "A"},
  {name: "Resource B", id: "B"},
  {name: "Resource C", id: "C"},
];

var form = [
  {name: "Start", id: "start", type: "date"},
  {name: "End", id: "end", type: "date"},
  {name: "Text", id: "text"},
  {name: "Resource", id: "resource", options: resources},
];

var data = {
  text: "Event 1",
  start: "2020-11-01",
  end: "2020-11-02",
  resource: "B"
};

Modal.form(form, data).then(function(args) {
  console.log(args.result);
});
```

Complex dialog

![Complex dialog](https://modal.daypilot.org/page/image/ylzvujg66bcixfr536msvc4whu/daypilot-modal-form-date-radios.png)

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

var resources = [
  {name: "Resource A", id: "A"},
  {name: "Resource B", id: "B"},
  {name: "Resource C", id: "C"},
];

var priorities = [
  {name: "Priority 1", id: 1},
  {name: "Priority 2", id: 2},
  {name: "Priority 3", id: 3},
];

var form = [
  {name: "Calendar Record"},
  {name: "Text", id: "text"},
  {name: "Display as", id: "displayAs", type: "radio", options: [
      {name: "Event", id: "event", children: [
          {name: "Start", id: "start", type: "date"},
          {name: "End", id: "end", type: "date"},
          {name: "Resource", id: "resource", options: resources},
        ]},
      {name: "Task", id: "task", children: [
          {name: "Priority", id: "priority", options: priorities},
        ]}
    ]}
];

var data = {
  text: "Event 1",
  start: "2020-11-01",
  end: "2020-11-02",
  resource: "B",
  priority: 2,
  displayAs: "event"
};

Modal.form(form, data).then(function(modal) {
  console.log(modal.result);
});
```

### Drop-in alert() replacement

![Modal dialog with simple message](https://code.daypilot.org/page/image/emcyyhpa75asjmfks776tts5rq/javascript-alert-replacement-css-theme-rounded.png)

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

Modal.alert("Hello, world!");
```

See it in action: [DayPilot.Modal.alert() Demo](https://demos.daypilot.org/alert/)

### Drop-in confirm() replacement

![Ok/Cancel modal dialog](https://code.daypilot.org/page/image/7rv6mndvbjaoxand6umohof67u/javascript-confirm-replacement-modal-dialog-rounded-css-theme.png)

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

Modal.confirm("Hello, world!").then(function(args) {
  console.log("Modal was closed");                           
});
```

See it in action: [DayPilot.Modal.confirm() Demo](https://demos.daypilot.org/modal-confirm/)

### Drop-in prompt() replacement

![Modal dialog with single input field](https://code.daypilot.org/image/big/i3ja5jt4ozgftbhfq5waazu4dq/javascript-prompt-replacement-modal-dialog.png)

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

Modal.prompt("What's your name?").then(function(args) {
  console.log("Hello", args.result);                           
});
```

See it in action: [DayPilot.Modal.prompt() Demo](https://demos.daypilot.org/modal-prompt/)

### Show custom HTML

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

var modal = new Modal();
modal.showHtml("<div>Hello, world!</div>");
```

### Show custom page

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

var modal = new Modal();
modal.showUrl("hello-world.html");
```

### Show custom DOM element

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

var div = document.createElement("div");
div.innerHTML = "Hello, world!"

var modal = new Modal();
modal.showHtml(div);
```


## API Docs

https://api.daypilot.org/daypilot-modal-class/

## CSS Themes

Default

![Default theme](https://code.daypilot.org/page/image/rq5bzaujz5dt5fffk5whmzt7vm/javascript-alert-replacement-default.png)

Flat

![Flat theme](https://code.daypilot.org/page/image/ec7s5umf3bbfflo3zldhus44iy/javascript-alert-replacement-css-theme-flat.png)

Rounded

![Rounded theme](https://code.daypilot.org/page/image/emcyyhpa75asjmfks776tts5rq/javascript-alert-replacement-css-theme-rounded.png)

## Tutorials

* https://code.daypilot.org/67418/javascript-confirm-replacement
* https://code.daypilot.org/17463/javascript-prompt-replacement
* https://code.daypilot.org/11136/javascript-alert-replacement
* https://code.daypilot.org/60333/using-daypilot-modal-in-angular-application-typescript

## Compatibility

* Chrome
* Safari
* Firefox
* Edge

## Issues

Please report issues in the forum:

https://forums.daypilot.org

## License

Apache License 2.0

NOTICE
```
This product includes DayPilot Modal (https://modal.daypilot.org).
```

## Demos

* [DayPilot.Modal.alert() Demo](https://demos.daypilot.org/alert/)
* [DayPilot.Modal.confirm() Demo](https://demos.daypilot.org/modal-confirm/)
* [DayPilot.Modal.prompt() Demo](https://demos.daypilot.org/modal-prompt/)