JavaScript Popup Boxes

By: Rajesh P.S.

Popup boxes serve as a valuable means to convey warnings or essential information to website visitors. JavaScript offers three distinct types of popup boxes that can be utilized for various purposes. They are:

alert()
confirm()
prompt()

alert() - JavaScript MessageBox

An alert dialog box primarily serves to communicate important messages to users by presenting them in a compact dialogue box. Notably, the alert() method doesn't require an object reference preceding it, as it is a component of the window object. Upon appearance, the user is prompted to click the "OK" button to acknowledge and proceed.

Syntax

alert('Your message...');

Continue Reading...

Browser View

Source

JavaScript Confirm() Box

A confirmation box facilitates user decision-making by presenting a choice. Upon triggering a JavaScript-driven confirm box, the user is prompted to select either the "OK" or "Cancel" option to proceed with the subsequent action. The outcome varies based on the chosen button, and you can define the ensuing course of action through conditional logic.

Syntax

result = window.confirm(message);

Browser View

Source

<html> <head> <script type="text/javascript"> function isConfirmed() { var conVal = confirm("Are you ready to confirm?"); if (conVal == true) { val = "Confirmed !!"; } else { val = "Cancelled !!"; } alert(val); } </script> </head> <body> <form> <input type="button" onclick="isConfirmed()" value="Want to confirm ?" /> </form> </body> </html>

JavaScript prompt Box

The alert() method lacks interactivity, while the JavaScript Prompt Box serves the purpose of collecting user input before progressing to the next stage. Employing a JavaScript prompt box prompts the user to provide an input value, with the requirement to click either "OK" or "Cancel" after inputting. The returned value from the prompt hinges on the user's interaction with the dialog: if they type and confirm, the method yields the user's input; if they confirm without typing, the method returns the predefined input from the provided argument. In the event of dismissal, typically by clicking "Cancel" or pressing "Esc," the method returns null across most browsers.

Browser View

Source

<html> <head> <script type="text/javascript"> function promptUser() { var iDay = prompt("Enter any value...", ""); if (iDay != null) { alert("The value you entered is.." + iDay); } else { alert("Should enter value..."); } } </script> </head> <body> <form> <input type="button" onclick="promptUser()" value="Display prompt box.." /> </form> </body> </html>

Conclusion

JavaScript popup boxes include alert, confirm, and prompt dialogs that enable interaction with website visitors. Alerts display messages, confirm dialogs prompt user choices, and prompt boxes gather input before proceeding, enhancing user engagement and interactivity.

Next > Opening a new window in JavaScript

Related Topics

More Related Topics.....