in javascript have 3 types of dialog boxes. these boxes are used to show an alert message in javaScript. it's used to show the error or confirmation message for the client.
- Alert Dialog Box
- Confirmation Dialog Box
- Prompt Dialog Box
Alert Dialog Box
An alert box is mostly used to show an error and warning message on the Html page. for example, a login page has required login details but the user doesn't give detail, as a part of validation in the Html page you can show an alert box.
<!DOCTYPE html>
<html>
<head>
<script>
function showMsg() {
window.alert('this is alert box message');
}
</script>
</head>
<body>
<h2>Alert box demo</h2>
<button type='button' onclick='showMsg()'>Alert</button>
</body>
</html>
Confirmation Dialog Box
A Confirmation Dialog Box is mostly used for showing a confirmation box on the Html page. It shows a box with two buttons OK and Cancel. if press the OK button then the return value is true and press the Cancel button then return the false value.
<!DOCTYPE html>
<html>
<head>
<script>
function showMsg() {
var tag=document.getElementById('res');
var val=window.confirm('Are you teenager?');
if(val)
tag.innerHTML = 'Your age is < 18';
else
tag.innerHTML = 'Your age is > 18';
}
</script>
</head>
<body>
<h2>Confirm box demo</h2>
<button type='button' onclick='showMsg()'>Check Me</button>
<p id='res' ></p>
</body>
</html>
Prompt Dialog Box
The prompt box is very useful when we want to show a popup text field for taking the additional information from the client, also this box has two buttons for submit press OK and no submit press Cancel button.
<!DOCTYPE html>
<html>
<head>
<script>
function showMsg() {
var tag=document.getElementById('res');
var retVal = prompt('Enter your name : ', 'Your good name please !!!');
if(retVal === null || retVal === 'Your good name please !!!'){
window.alert('Please enter your name !!!');
}else{
tag.innerHTML = 'Your good name is ' + retVal;
}
}
</script>
<style>
p{
font-size:35px;
}
</style>
</head>
<body>
<h2>Prompt box demo</h2>
<button type='button' onclick='showMsg()'>Check Me</button>
<p id='res' ></p>
</body>
</html>
