Dialog Box: A dialog box is a temporary window used to retrieve user input while creating application. It can be used to raise or alert and to get the confirmation of input from the user
Types of Dialog box:
- Alert dialog box
- Confirmation dialog box
- Prompt dialog box
Alert dialog box: It is used to give warning or alert messages to the user. For e.g :
If you want to enter numbers between 1 to 10 and any number you entered is greater than 10 it will give you a alert dialog box.
<!DOCTYPE html>
<html>
<body>
<p>Please input a number between 1 and 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
window.alert("Enter number less than 10");
text = "";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Confirmation dialog box: This dialog box displays a specified message along with ok and cancel button within the dialog box.
<html>
<head>
<script type="text/javascript">
<!--
function getConfirmation(){
var retVal = confirm("Do you want to continue ?");
if( retVal == true ){
document.write ("Continue!");
return true;
}
else{
document.write ("Don't continue!");
return false;
}
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type="button" value="Click Me" onclick="getConfirmation();" />
</form>
</body>
</html>
Prompt dialog box: This is user interactive dialog box is used to pop-up a text box to get user input. The user needs to fill in the field and then click OK.
<html>
<head>
<script type="text/javascript">
<!--
function getValue(){
var retVal = prompt("Enter your age : ", "");
document.write("You entered : " + retVal);
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type="button" value="Click Me" onclick="getValue();" />
</form>
</body>
</html>
0 Comment(s)