JavaScript Dialogue Boxes

JavascriptFront End TechnologyObject Oriented Programming

JavaScript supports three important types of dialog boxes. These dialog boxes can be used to raise and alert, or to get confirmation on any input or to have a kind of input from the users. Here we will discuss each dialog box one by one.

Following is the code implementing JavaScript dialogue boxes −

Example

 Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
   font-size: 18px;
   font-weight: 500;
}
</style>
</head>
<body>
<h1>Dialogue boxes</h1>
<div class="sample"></div>
<button class="alert">ALERT BOX</button>
<button class="confirm">CONFIRM BOX</button>
<button class="prompt">PROMPT BOX</button>
<h3>
Click on the above button to see their dialogue box
</h3>
<script>
let fillEle = document.querySelector(".sample");
document.querySelector('.alert').addEventListener('click',()=>{
   alert('Hello World');
});
document.querySelector('.confirm').addEventListener('click',()=>{
   confirm('Are you sure?');
});
document.querySelector('.prompt').addEventListener('click',()=>{
   prompt('Enter your name');
})
</script>
</body>
</html>

Output

On clicking the “ALERT BOX” button −

On clicking the “CONFIRM BOX” button −

On clicking the “PROMPT BOX” button −


raja
Published on 06-May-2020 11:50:05
Advertisements