
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
JavaScript Dialogue Boxes
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
<!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 −
- Related Articles
- Is it possible to select text boxes with JavaScript?
- How to create custom select boxes with CSS and JavaScript?
- Remove Boxes in C++
- Selenium WebDriver and DropDown Boxes.
- Program to find maximum number of boxes we can fit inside another boxes in python
- Type of Boxes Generated in CSS
- How to pass check boxes data using JSP?
- Block-level Elements and Block Boxes in CSS
- Inline-level Elements and Inline Boxes in CSS
- Using accounting, calculate the missing boxes in the table.
- Maximum Candies You Can Get from Boxes in C++
- What are the role of S-boxes in DES?
- How to Copy Chart with Text Boxes in Excel?
- The boxes are to be filled with apples in a heap. If 24 apples are put in a box then 27 boxes are needed. If 36 apples are filled in a box how many boxes will be needed?
- How to draw bounding boxes on an image in PyTorch?

Advertisements