JavaScript Popup Boxes
Popup boxes are the most useful way of showing a warning or any other important information to website visitors. JavaScript has three different types of popup box available for you to use. They are:- alert()
- confirm()
- prompt()
alert() - JavaScript MessageBox
An alert dialog box is mostly used to inform or alert the user by displaying some messages in a small dialogue box. It is important to note that the alert() method doesn't have an object name in front of it, because the alert() method is part of the window Object . When an alert box pops up, the user will have to click "OK" to proceed. Syntax
alert('Your message...');
Browser View
<html>
<body>
<input type="button" value="Click Here..." onclick="alert('This is an Alert Box');" />
</body>
</html>
JavaScript Confirm() Box
A confirmation box is used to let the user make a choice. When Javascript pops up a confirm box , the user will have to click either "OK" or "Cancel" to proceed the next step. Different actions will occur depending on what button the user clicks. You can specify this course of action with conditional logic. Syntax
result = window.confirm(message);
Browser View
<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 can not interact with the visitor. Javascript Prompt Box is often used if you want the user to enter an input value before proceed to the next step. When Javascript display prompt box , the user will have to click either "OK" or "Cancel" to proceed after entering an input value. The value returned by prompt depends on what exactly the user does with the dialog. If the user types something and then clicks OK or presses Enter, the prompt method returns the user input string. If the user clicks OK or presses Enter without typing anything into the prompt dialog , the method returns the suggested input, as specified in the second argument passed to prompt. If the user dismisses the dialog (e.g. by clicking Cancel or pressing Esc), then in most browsers the prompt method returns null. Browser View
<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>
Related Topics
- Opening a new window in JavaScript
- How to Create Drop-Down Lists in JavaScript
- How do I include a JavaScript file in another JavaScript file?
- Print the content of a Div using JavaScript/jQuery
- How to get the current URL using JavaScript ?
- How to Detect a Mobile Device with JavaScript/jQuery
- How to validate an email address in JavaScript
- JavaScript Array Iteration
- How to Remove a Specific Item from an Array in JavaScript
- What is JavaScript closures?
- How To Remove a Property from a JavaScript Object
- How to get selected value from Dropdown list in JavaScript
- How do I get the current date in JavaScript?
- How to Open URL in New Tab | JavaScript
- How to delay/wait/Sleep in code execution | JavaScript
- How to round to at most 2 decimal places | JavaScript
- How to convert string to boolean | JavaScript
- How to check undefined in JavaScript?
- How To Copy to Clipboard | JavaScript
- How to encode a URL using JavaScript?
- How to force Input field to enter numbers only | JavaScript
- How to create multiline string in JavaScript
- How to Check for an Empty String in JavaScript?