Search within TutorialsPark

Javascript BOM : System Dialogs


Use Javascript Window Objects methods to prompt the user in different ways


Javascript Browser Object Model : System Dialogs

The Browser can invoke system dialogs to display to the user using methods alert() , confirm() , prompt()

These dialog boxes have no relation with the webpage displayed in the browser and contain no HTML code. Their appearance is based on the system's operating system or browser settings but not CSS.

The Dialog boxes are synchronous and modal, which means that the code execution stops when a dialog is displayed, and resumes after the getting user's response or being dismissed.

Table : Move and Resize Methods

Method Description Returns
alert(msg) To Display a dialog window to the user and wait for user to dismiss it void
confirm(msg) To Display a dialog window with an OK/Cancel prompt boolean
prompt(msg, val) To Display a dialog prompting the user to enter a value string
showModalDialog(url) To Display a popup window showing the specified URl void

Each of the above method displays a different kind of prompt.


Javascript BOM : System Dialog Boxes using alert() method

The System Dialog using alert() method is used to send a warning or alert to the user to do something.

The alert method creates a small independent window called as a dialog box containing a custom message for the user.

The Dialog box is synchronous and modal, hence all execution is stopped until the user clicks on OK or dismisses the popup

Syntax: Javascript System Dialog Box using alert() method

Example: Javascript System Dialog Box using alert() method

Give it a TRY! » Note: The appearance of the alert box is depends on the OS and browser.Hence may vary on different devices.


Javascript BOM : System Dialog Boxes using prompt() method

The prompt() method creates a dialog box which prompts the user for an input.

In addition to a OK or cancel button the dialog box has a text box which accepts input from the user.

The prompt() method accepts two arguments

1. The text to display to the user.

2. The default value for the text box which can also be an empty string.

Syntax: Javascript System Dialogs using prompt() method

Example: Javascript System Dialog using prompt() method

Give it a TRY! » Note: These system dialogs can be used to display information and ask for inputs from user.


Javascript System Dialogs using confirm() methods

The confirm() method is used to create a dialog box seeking a confirmation from the user. The user must agree before the action is completed

A popup is created with OK and a Cancel button.When clicked, the OK buttons returns a true while the Cancel buttons returns false as the output.

The method can accept only one argument, the question to be put before the user

Example : Javascript System Dialogs using confirm() Method

Give it a TRY! » Note: The difference between confirm() and alert() is the presence of cancel button.


Javascript System Dialogs : showModalDialog() method

The showModalDialog() method is used to display a popup window showing the specified URl.It accepts only URL as an argument

Example: Javascript System Dialog showModalDialog()

Give it a TRY! » Note:The showModalDialog is widely abused by advertisers, hence browsers do apply some restrictions.


Javascript Prompting the user: all in One

The below script makes use of all the methods in a single code block.

Example: Javascript System Dialog Box All-in-One

Give it a TRY! » Note: See Window Object Reference to see all the properties in great detail.