• Apache Software License 2.0


  • Displays HTML or a standalone page
  • Modal - hides the background with a semi-transparent div
  • Draggable modal window
  • Auto-stretching to show all content
  • Client-side solution that works with any server-side platform (PHP, Node.js, Ruby)
  • Built-in support for ASP.NET WebForms on the server side (PostBack)
  • Works well with jQuery (but jQuery is not required)
  • Includes replacement for alert(), prompt() and confirm()
  • Full CSS styling

Displaying the Modal Dialog

Displaying a standalone page (URL):

var modal = new DayPilot.Modal({
  onClosed: function(args) {
    console.log("Modal dialog closed");
  // ...

Displaying HTML:

var modal = new DayPilot.Modal({
  onClosed: function(args) {
    console.log("Modal dialog closed");
  // ...



Whether the height should be increased automatically to avoid scrollbar, until .maxHeight is reached.

Default value: true


If set to false, stretch() will be registered to onload event and fired after PostBack as well.

Default value: false

.border (ignored)

Note: Since 2.6, this property is ignored. Use .theme instead.

Modal dialog border style.

Default value: "1px solid black"

.corners (ignored)

Note: Since 2.6, this property is ignored. Use .theme instead.

"Rounded" or "Regular".

Default value: "Rounded"


CSS class of the main div.

Defalt value: null


The internal iframe object used to display a standalone page using .showUrl() will be removed from DOM. If set to false, the DOM object will be cached and reused on the next .showUrl() call.

Default value: true


Whether modal window dragging should be enabled (move it by dragging the border).

Default value: true


Height in pixels. If autoStretch is enabled, this is the minimum height.

Default value: 200


Position of the modal dialog from the left. If not specified, the modal dialog will be centered.

Default value: null


HTML to be displayed in the modal window before the target URL loads (only for .showUrl()).

Default value: null


Maximum height in pixels when using autoStretch. If not set, it will be stretched until the bottom space is equal to .top.

Default value: null

.opacity (ignored)

Note: Since 2.6, this property is ignored. Use .theme instead.

Opacity of the background hiding div (0-100).

Default value: 30


Whether the modal should scroll with the page or stay at the same position (fixed).

Default value: true


Specifies the CSS theme used to style the modal dialog and the background div.

There are two built-in themes available:




.modal_default_main { border: 10px solid #ccc; }
.modal_default_background { opacity: 0.3; background-color: #000; }




.modal_min_main { border: 1px solid #ccc; }
.modal_min_background { opacity: 0.3; background-color: #000; }

Default value: "modal_default"


Y position of the modal dialog in pixels.

Default value: 20


Whether iframe should be used to display the modal dialog content. Only applicable for showHtml(), iframe is forced when displaying a separate page using showUrl().

Default value: true


Width of the modal dialog in pixels.

Default value: 300


z-index of the background hiding div.

Event Handlers


Called before the dialog is to be closed. You can cancel the action here using args.preventDefault().


  • args.backgroundClick - set to true if the modal is closing using a click on the background div
  • args.preventDefault() - prevents the modal from being closed
  • args.result - object passed to .close(result)


This event handler is called when the dialog is closed. The result passed to DayPilot.Modal.close(result) will be available as args.result.


  • args.result - object passed to .close(result)


Called before the dialog is displayed. You have a chance to modify the DOM here in case of showHtml().


  • args.root - root <div> element that wraps the content

Move the Dialog by Dragging


modal.dragDrop = true; // default

Nested Dialogs

It is possible to open another modal dialog from an already open dialog. You need to create the DayPilot.Modal instance on the main page (not inside the modal) and access it using window.parent.


If autoStretch is set to true (default) the window will stretch its height automatically to avoid vertical scrollbar.

You can also call it manually


Built-In Dialog Replacements (alert, prompt, confirm)

Closing the Modal Dialog


Call DayPilot.Modal.close() from within the modal page. The optional parameter will be passed to .onClosed event handler.

var result = { action: "Saved" };

Note that the client-side library (daypilot-modal.js) has to be included in the modal page as well.


See: How to show a modal dialog in ASP.NET MVC Razor

ASP.NET WebForms

Call Modal.Close() on the page displayed inside the modal dialog (DayPilot.Modal-2.2.cs or DayPilot.Modal-2.2.vb is required):


Passing result data to the main page

You can pass a custom object to the modal dialog when closing it.

On the server side, use a Hashtable to create a more complex object:

Hashtable ht = new Hashtable();
ht["refresh"] = "yes";
ht["message"] = "Event updated.";

You can access this object on the client side in onClosed event handler.

var modal = new DayPilot.Modal();
modal.onClosed = function(args) {

Using the modal popup with UpdatePanel

At this moment, Modal.Close() doesn't work if you call it during asynchronous PostBack. You need to add the close button to PostBack triggers:

<asp:UpdatePanel ID="UpdatePanel" runat="server">
    <asp:PostBackTrigger ControlID="ButtonOK" />

You can also update the modal dialog height automatically after the UpdatePanel height changes:

<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (sender, args) {
  modal.stretch(); });

New in 2.2

  • .onClosed event handler replaces .closed property. The event handler receives an "args" parameter.
  • Autostretching will adjust the width first (in order to fit elements with fixed width).
  • DayPilot.Modal.close() method that can be used from within the dialog to close it. It replaces the parent.DayPilot.ModalStatic.close() call. Requires the daypilot-modal.js file to be included in the modal page source.

New in 2.3

  • DayPilot.ModalStatic.stretch()
  • .showHtml() accepts DOM element in addition to HTML string
  • DayPilot.Modal.opener() added. Lets you access the open DayPilot.Modal instance from within the modal window.
  • .loadingHtml property allows settings HTML that will be displayed in the modal window before the target URL opens

New in 2.4

  • .loadingHtml property works in IE10

New in 2.5

June 30, 2016

  • DayPilot.Modal.alert().then()
  • DayPilot.Modal.confirm().then()
  • DayPilot.Modal.prompt().then()
  • Global "box-sizing: border-box" compatibility fixed.
  • DayPilot.Modal.closeSerialized()

New in 2.6

November 23, 2016

  • New onClose(args) event that when the modal is about to be closed. Allows canceling the action using args.preventDefault(). 
  • Built-in themes: "modal_default", "modal_min".
  • CSS themes suport (.theme property). Disabled properties: border, corners, opacity.
  • New .left property (centered if left is null).
  • New .disposeOnClose property (default true).
  • New onShow() event.
  • closeSerialized() works for !useIframe
  • Not forcing useIframe = true for showUrl().

New in 2.7

January 9, 2017

  • Promise success on modal cancellation for alert(), confirm(), prompt().
  • Full CSS styling for (padding replaced with theme styles) for alert(), confirm(), prompt().
  • Customizable button text (options.okText, options.cancelText) for alert(), confirm(), prompt().