DayPilot Knowledge Base

AJAX Calendar/Scheduling Controls
DayPilot Pro (AJAX Calendar Control)
» DayPilot AJAX Calendar
DayPilot Pro (AJAX Monthly Calendar Control)
» DayPilot AJAX Monthly Calendar
DayPilot Pro (AJAX Scheduler Control)
» DayPilot AJAX Scheduler
DayPilot » Knowledge Base » How to make sure that the modal dialog is on top of all other page elements

How to make sure that the modal dialog is on top of all other page elements

Last revision: Jan 6, 2011

Since DayPilot Pro 6.2.2185 it is possible to specify z-index of the modal popup.


This number will be used for both the full-page semi-transparent background element and the dialog itself.

You should make sure that the zIndex value is higher than z-index of the other elements on the page.

This property is optional. If you don't specify z-index for any element on the page the modal popup will automatically be shown on top because it's added at the end of the DOM tree (as the last element of document.body).


This example sets the z-index of the modal popup to 100.

function createEvent(start, end, resource) {
        var modal = new DayPilot.Modal(); = 60;
        modal.width = 300;
        modal.opacity = 70;
        modal.border = "10px solid #d0d0d0";
        modal.closed = function() {
            if(this.result == "OK") {
        modal.height = 250;
        modal.zIndex = 100;
        modal.showUrl("New.aspx?start=" + start.toStringSortable() + "&end=" + end.toStringSortable() + "&r=" + resource);


How to show a modal dialog in ASP.NET MVC 3 Razor
How to open a new event dialog using TimeRangeSelected event (modal.js)
How to make the modal dialog draggable
How to use Scheduler with 100% height