Overview

The open-source DayPilot.Modal dialog allows creating custom modal dialogs. The modal dialog can display custom HTML or a standalone page. In addition to this, DayPilot.Modal also includes pre-built replacements for the standard functions, including confirm(). The DayPilot.Modal.confirm() method can be used as a more flexible way to ask users for confirmation:

  • Familiar API very similar to the original confirm() function
  • Custom CSS themes are supported
  • You can replace OK/Cancel buttons with Yes/No or other buttons
  • The question displayed by the modal dialog can be defined using text or custom HTML

See also:

License

Apache License 2.0

Live Demo

JavaScript confirm() vs. DayPilot.Modal.confirm()

JavaScript confirm()

var result = confirm("Are you sure?");
if (result) {
  console.log("confirmed");
}

DayPilot.Modal.confirm()

DayPilot.Modal.confirm("Are you sure?").then(function(args) {
  if (args.result) {
    console.log("confirmed");
  }
});

The args.result property holds "OK" string if the OK button was clicked. In case that the modal was closed using the Cancel button or by clicking the background the args.result value is null. Alternatively, you can check the value of args.canceled (boolean).

Using Custom Button Text (Yes/No)

javascript-confirm-replacement-modal-dialog-yes-no.png

You can replace the standard OK/Cancel button text with custom strings using the options parameter:

  • options.okText specifies the confirm button text
  • options.cancelText specifies the cancel button text
DayPilot.Modal.confirm("Are you sure?", { okText: "Yes", cancelText: "No" }).then(function(args) {
    console.log(args.result);
});

"Flat" CSS Theme

javascript-confirm-replacement-modal-dialog-flat-css-theme.png

DayPilot.Modal.confirm("Are you sure?", { theme: "modal_flat" }).then(function(args) {
    console.log(args.result);
});

The "Flat" CSS theme can be found in themes/modal_flat.css file.

"Rounded" CSS Theme 

javascript-confirm-replacement-modal-dialog-rounded-css-theme.png

DayPilot.Modal.confirm("Are you sure?", { theme: "modal_rounded" }).then(function(args) {
    console.log(args.result);
});

The "Rounded" CSS theme can be found in themes/modal_rounded.css file.