Popup boxes

JavaScript introduced three dialog boxes that work well enough for alerting, confirming and prompting for values.

  1. alert()
  2. confirm()
  3. prompt()

When we work with client side, these dialog boxes are helpful to raise and alert, or to get confirmation on any type of input from the users

Alert Box ( JavaScript Message Box )

Syntax

alert('Your message here');

Alert Box is the Javascript message box that 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. It is often used if you want to make sure information display to the user. Whenever an alert box pops up, the user will have to click “OK” button to proceed to next step



<!DOCTYPE html>
<html>
<body>
	<input type="button" value="Click Here to show alert box" onclick="alert('This is an Alert Box');" />
</body>
</html>

Confirm Box

Javascript confirm box is often used if you want the user to 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. Two different actions will occur depending on which button the user clicks. If the user clicks “OK”, the confirm box returns true and if the user clicks “Cancel”, the Confirm box returns false



<html>
<head>
<script type="text/javascript">
	function confirmMesage()
	{
		var conVal = confirm("You have to confirm !!");
		if (conVal == true)
		{
			val = "Confirmed !!";
		}
		else
		{
			val = "Cancelled !!";
		}
		alert(val);
	}
</script>
</head>
<body>
	<form>
	<input type="button" onclick="confirmMesage()" value="Click here to confirm" />
	</form>
</body>
</html>

Prompt Box

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. If the user clicks “OK” the box returns the input value and if the user clicks “Cancel” the box returns null



<html>
<head>
<script type="text/javascript">
function promptUser() {
	var iDay = prompt("Which day is today ?", "");
	if (iDay != null)
	{
		alert("Today is " + iDay);
	}
	else
	{
		alert("You should enter a Day !!");
	}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="promptUser()" value="Click here to enter a day !!" />
</form>
</body>
</html>