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

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

DayPilot.Modal.zIndex

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

Example

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

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