Tutorial On Various Types Of Javascript Dialog Windows

The tutorial makes a complete Javascript dialog window for beginners. In this article, I discuss several types of dialog windows in JavaScript. The dialog windows is an essential component so that the application system can communicate with users.

What is the JavaScript dialog window?

Dialog box is a kind of pop up that asks users to make decisions or get information. The primary purpose of the dialog windows is used to interact with users.

There are three kinds of dialog windows in Javascript:

• Dialog box alert().
• Dialog confirm().
• Dialog input prompt().

These three dialog have different functions and objectives.

Various dialog boxes for javascript

Dialog Box Alert()

If you followed my previous article, “Basic Introduction Javascript for Beginners” often met with examples of using alerts. However, I want to repeat in more detail so that you understand, and maybe there are new visitors to find the JavaScript alert windows tutorial series through this article.

The window alert() used to display a warning or information message and an “OK” button. The alert() function in the javascript is window object.

The syntax of writing and using alerts is quite easy, and you can use it in the following ways

Or shorter:

The alert() function will not return any value when executed.

Also, you can create an alert box whose message stored in a Javascript variable, then add the variable to the alert() function.

Example:

A brief description:

• Alert dialog force the browser and user to read the message displayed.
• Alert() support with all browsers

Confirm Dialog Window ()

The confirm() dialog windows used so that the user confirms before the system takes certain actions.

Confirm box is a javascript popup in which there are two choices of “OK” and “Cancel” buttons (maybe each browser displays a different choice of writing). The applications related to data or databases usually use the confirm dialog window. The goal is to avoid unwanted clicks.

The value generated from the Confirm Box is true or false, if the user clicks the “OK” button, it will return true, and if the user clicks the “Cancel” button, it returns false. For more details, please see the following code example:

For example:

when we delete/make changes data, we recommend you display confirm box dialog to confirm.

The confirm box Javascript created with the confirm() function.

Example:

The dialog box confirm() will return true when we select the OK button and will return false when we select Cancel.

The return value can be accommodated in the variable for the next process.

Example:

Prompt Dialog Window()

The window prompt() serves to retrieve input from the user. The dialog window prompt() return a string value from what the user entered.

Javascript prompt dialog is a Javascript input whose appearance is similar to an alert but has an input that functions to enter text or writing from the user. The prompt dialog is written with the code as follows:

Example:

Another method for displaying the JavaScript alert

A javascript modal dialogs is an alternative dialog alert that is custom made to produce a better view. The creation of Javascript modal native has been abandoned because many great plugins are created and shared free of charge by the Javascript community. Especially if you use the JQuery framework. I have reviewed one of the popular windows dialog plugins, the sweetalert plugin.

Conclusion

• Dialog alert() applied to display information or warnings.
• Windows confirm() applied to confirm before making further steps.
• Dialog input prompt() used if you need a value or answer from the user.
• The three dialog windows above will found in making applications that require interaction with users.

So the Javascript alert box tutorial, hopefully useful. See you in the next JavaScript tutorial for beginners.

Next Tutorial : Complete Reference Javascript Array Tutorial for Beginners