How many type of dialog boxes in JavaScript?

Asked 19-Jul-2021
Viewed 171 times

0

How many type of dialog boxes in JavaScript?    


1 Answer


0

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.

  1. Alert Dialog Box
  2. Confirmation Dialog Box
  3. 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> 





Loading...
Ads