Dialogs

The Dialogs class contains static methods for three different types of user dialogs - information, confirmation and input.

1.Information dialog

The showInfoDialog method shows a dialog, displaying a custom message and an OK button. This type of dialog is used for displaying some information to the user.

You can specify the message and the title text, the Dom element to append the dialog to, and the css theme.

JavaScript

var today = new Date();
var startTime = today.getHours();
var elapsedTime = 0;
ui.Dialogs.showInfoDialog("Elapsed Time", "You have played this game for " + elapsedTime + " hours!",
           calculateTime(startTime), document.getElementById("content"));function calculateTime (startTime)
 {
  var currTime = new Date();
  elapsedTime = currTime.getHours() - startTime;
}

A callback function can be specified, which will be invoked when the dialog is closed.

2.Confirmation dialog

The showConfirmDialog method shows a dialog, displaying a custom message and OK and Cancel buttons. This type of dialog is used for handling user choice.

You can specify the message and the title text, the Dom element to append the dialog to, and the css theme.

JavaScript

var infoMessage; = "";// show the dialog
ui.Dialogs.showConfirmDialog("Elapsed Time", infoMessage, informUser, document.getElementById("content"), "standard");//the callback function
function informUser(elapsedTime)
{
     if (result == ui.ModalResult.Cancel) return;
        startGame(); 
}

A callback function can be specified, which will be invoked when the dialog is closed. The dialog's modal result will be set accordingly, depending on which button has been clicked to close the dialog, and its value will be accessible as an argument of the callback function.

3.Input dialog

The showInputDialog method shows a dialog, displaying a custom message, custom input control and OK and Cancel buttons. This type of dialog is used for handling user input.

You can specify the message and the title text, the Dom element to append the dialog to, and the css theme. Additionally, you can choose the type of the input control and the property, whose value will be monitored. If these parameters are not specified, the dialog will show a default empty HTML text input and will monitor its value property.

JavaScript

// create a custom input for the input dialog
 var select = document.createElement("select"); var option = document.createElement("option");
 option.value = 0;
 option.innerHTML = "Relaxed";
 select.appendChild(option); option = document.createElement("option");
 option.value = 1;
 option.innerHTML = "Timed";
 select.appendChild(option); // show the dialog
 ui.Dialogs.showInputDialog("", "Choose game mode", startGame, document.getElementById("content"), select, "value");

A callback function can be specified, which will be invoked when the dialog is closed. The dialog's modal result will be set accordingly, depending on which button has been clicked to close the dialog, and its value will be accessible as an argument of the callback function. The dialog's result will be set to the value of the monitored property and it will be passed as the second argument to the callback function.