License

  • Apache Software License 2.0

Features

  • 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 using themes

Displaying the Modal Dialog

You can display a standalone page in the modal dialog using showUrl() method:

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

Displaying HTML:

var modal = new DayPilot.Modal({
  onClosed: function(args) {
    console.log("Modal dialog closed");
  },
  // ...
});
modal.showHtml("<h1>Hello</h1>");

API Documentation

CSS Themes

There are two built-in themes available: "modal_default" and "modal_min". You can change the theme using DayPilot.Modal.theme property.

"modal_default"

daypilot-modal-css-theme-modal_default.png

CSS:

.modal_default_main { border: 10px solid #ccc; max-width: 90%; }
.modal_default_content { padding: 10px 0px; }
.modal_default_inner { padding: 20px; }
.modal_default_input { padding: 10px 0px; }
.modal_default_buttons { padding: 10px 0px; }
.modal_default_background { opacity: 0.3; background-color: #000; }
.modal_default_ok { padding: 3px; width: 80px; }
.modal_default_cancel { padding: 3px; width: 80px; }

"modal_min"

daypilot-modal-css-theme-modal_min.png

CSS:

.modal_min_main { border: 1px solid #ccc; }
.modal_min_background { opacity: 0.3; background-color: #000; }
.modal_min_ok { padding: 3px 10px; }
.modal_min_cancel { padding: 3px 10px; }

Custom CSS Theme

You can also create a custom CSS theme:

  • All CSS classes that belong to the theme need to be prefixed by the theme name.
  • Include the CSS with the theme classes.
  • Set the theme property

Example:

JavaScript

var modal = new DayPilot.Modal({theme: "my_modal_theme"});

CSS

.my_modal_theme_main { border: 10px solid #990000; }
.my_modal_theme_background { opacity: 0.5; background-color: #000; }

Move the Dialog by Dragging

modal-dialog-asp-net-open-source-drag.png

The modal dialog can be moved using drag and drop (use the border). This feature is enabled by default. You can disable it using dragDrop property.

Nested Dialogs

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

AutoStretch

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

You can also call stretch() manually when needed:

modal.stretch();

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

Closing the Modal Dialog

JavaScript

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

var result = { action: "Saved" };
DayPilot.Modal.close(result);

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

ASP.NET MVC

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):

Modal.Close();

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.";
Modal.Close(ht);

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

var modal = new DayPilot.Modal();
modal.onClosed = function(args) {
  console.log(args.result.message);
};
modal.showUrl("Edit.aspx");

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">
  <ContentTemplate>
  ...
  </ContentTemplate>
  <Triggers>
    <asp:PostBackTrigger ControlID="ButtonOK" />
  </Triggers>
</asp:UpdatePanel>

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(); });
</script>

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().

New in 2.8

June 11, 2019

  • DayPilot.Modal.prompt() default value fixed
  • Default zIndex set to 99999
  • Removing overlay div on close (if disposeOnClose === true)
  • Disposing iframe on close
  • Padding added to OK and Cancel buttons (CSS theme)
  • Content padding added (CSS theme)
  • Button width set to 80px (CSS theme)
  • Width automatically adjusted on narrow devices (max-width:90%), autocentering