All browser JavaScript engines include support for simple modal dialog that can be used to display a message:

javascript-alert-replacement-chrome.png

alert("Hi!");

It has several drawbacks:

  • It only displays plain text.
  • The appearance is defined by the browser and can't be changed.
  • It's truly "modal" and blocks access to the browser window (try running while (true) alert("Hi!");).
  • It blocks JavaScript execution until it's closed.

DayPilot.Modal (open-source) includes a simple alert() replacement which addresses these issues. You can use it as a simple drop-in replacement (but note the different return value handling model):

DayPilot.Modal.alert("Hi!");

License

DayPilot.Modal is available under Apache License 2.0 (open-source).

Features

  • Custom HTML
  • CSS Styling
  • Simple built-in CSS theme (no additional dependencies)
  • Customizable dimensions and position
  • Supports drag and drop moving
  • Returns Promise for result handling

Quick Example

javascript-alert-replacement-hello-world.png

<script src="daypilot.modal.js"></script>
<script>
  DayPilot.Modal.alert("Hello, World!");
</script>

Configuration

DayPilot.Modal.alert(message, options);

The second parameter lets you specify "options" object. The following properties are supported:

  • left (number; left position in pixels, use null to center the modal dialog)
  • top (number; top position in pixels, default value: 40)
  • scrollWithPage (boolean; scroll with page or stay fixed, default value: true)
  • theme (string; CSS theme name)
  • dragDrop (boolean; enables drag and drop using the modal border, default value: true)

For a full list of properties, see DayPilot.Modal.

Customizing the Position

To display the modal dialog in the upper-left corner, use left and top properties:

DayPilot.Modal.alert("Upper-Left Corner", { left: 10, top: 10});

CSS Themes

javascript-alert-replacement-css-theme.png

All classes used to mark the modal dialog elements are prefixed with the theme name and underscore. This way you can create a custom theme that doesn't interfere with the 

DayPilot.Modal.alert("Hello, World!", { theme: "blue" });

"Blue" theme:

.blue_background { background-color: #000; opacity: 0.7; }
.blue_main { border-left: 30px solid #2367bf; }
.blue_main, .blue_main input, .blue_main button { font-size: 18px; }
.blue_inner { padding: 20px; background: #237ed8; color: white; }
.blue_buttons { padding: 30px 0px; }
.blue_main button { background-color: #2367bf; color: white; padding: 10px 20px; border: 0px; border-radius: 0px; cursor: pointer; outline: none; }

Waiting for the Modal to Close

JavaScript doesn't allow synchronous blocking code waiting for user input (without freezing the browser) so the DayPilot.Modal.alert() method returns a Promise which you can use to execute custom code after closing the modal dialog:

DayPilot.Modal.alert("Hello, World!")
    .then(function(args) {
        if (args.result) {
            console.log("You clicked OK.");
        }
        else {
            console.log("You canceled the modal dialog.");
        }
    });

The args parameter structure is as follows:

  • args.result (result object, in case of alert() it can be "OK" string or undefined value)
  • args.backgroungClick (boolean; this property is set to true when the modal dialog was closed by clicking on the background)