A dialogue box is a simple small window that comes up on web pages, giving the user a warning information, a confirmation or instructing the user to input values. Dialogue boxes are very important when building web pages and they serve their purpose. Sometimes you might want to send an information to the user when a wrong action is carried out on the web page or inform the user about an activity that has not been completed yet. Such actions can only be carried out easily with the help of dialogue box.
There are different types of dialogue box used on web pages and they include:
- Simple Alert dialogue box
- Confirmation dialogue box
- Prompt dialogue box
The Simple Alert Dialogue Box
We have been making use of this dialogue box in our previous tutorials. The simple alert dialogue box is mostly used to give warning to users when certain action is carried out by the user on the web page. This alert box offers the user an “OK” option which can be used to quite the dialogue box window. Example shown below
The Confirmation Dialogue Box
The confirmation dialogue box is mostly used to confirm a users action before performing it. Sometimes you see dialogue boxes showing information such as “Do you want to continue without saving?” on a web page. This is an example of what the confirmation dialogue box is used for. The confirmation dialogue box also provides the user with two options which are “OK” or “CANCEL”. The “OK” approves the action while the “CANCEL” disapproves the action and returns the page back to the previous state. The confirmation dialogue box can be embedded on the web page with the help of a confirm() method as shown below.
Example shown below
Prompt Dialogue Box
The prompt dialogue box is used to collect user input using a simple pop up box. The prompt box allows the user to interact with the web page by inputting the required value before clicking “ok”. The prompt dialogue box can be inserted on the web page with the help of a prompt() method which takes in two values: A label and a string like placeholder. Example shown below