DayPilot.Modal Dialog

• Daypilot.Modal-2.0.cs 2 kB
  ASP.NET WebForms helper class (C#).
• daypilot-modal-2.0.js 15 kB
  Main file: JavaScript source code.
• Daypilot.Modal-2.0.vb 1 kB
  ASP.NET WebForms helper class (VB).

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
• Support for ASP.NET WebForms, MVC
• Works well with jQuery (but jQuery is not required)

Displaying the modal dialog

Displaying an URL:

var modal = new DayPilot.Modal();
modal.showUrl("Edit.aspx");

Displaying HTML:

var modal = new DayPilot.Modal();
modal.showHtml("<h1>Hello</h1>");

Configuring the modal dialog

.autoStretch

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

Default value: true

.autoStretchFirstLoadOnly

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

Default value: false

.border

Modal dialog border style.

Default value: "1px solid black"

.closed

Function called when the modal dialog is closed using .close() method. The result is stored in .result.

Default value: null

.corners

"Rounded" or "Regular".

Default value: "Rounded"

.className

CSS class of the main div.

Defalt value: null

.dragDrop

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

Default value: true

.height

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

Default value: 200

.maxHeight

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

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

Default value: 30

.scrollWithPage

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

Default value: true

.top

Y position of the modal dialog in pixels.

Default value: 20

.useIframe

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

Width of the modal dialog in pixels.

Default value: 300

.zIndex

z-index of the background hiding div.

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.

AutoStretch

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

You can also call it manually

modal.stretch()

Closing the modal dialog

JavaScript

Call DayPilot.ModalStatic.close(). If you call it from the modal dialog page, you need to access it using window.parent:

window.parent.DayPilot.ModalStatic.close();

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.0.cs is required):

Modal.Close();

Passing result data to the main page

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

The custom object will be accessible as .result. You can read it in .closed handler. 

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

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>