Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to display a dialog box on the page?
In this article, we will learn how to display a dialog box on the page using the dialog HTML tag.
Dialog boxes can be a useful tool to provide feedback to users or to prompt them for input. The HTML <dialog> element provides an easy way to display a dialog box on a web page. The <dialog> element is not supported in all browsers, but it can be polyfilled using JavaScript to provide support for older browsers.
Let’s understand how to implement a dialog box on a webpage with the help of some examples
Example 1
In this example, we will create an HTML <dialog> element with an id of "my-dialog". Inside the <dialog> element, we will add a heading, some content, and a close button. We will also add an <button> element with an id of "open-dialog" that will open the dialog box when clicked.
In the JavaScript code, we will use the showModal() method to display the dialog box when the "Open Dialog" button is clicked. We will also add an event listener to the "Close" button that will close the dialog box when clicked using the close() method.
Filename: index.html
<html lang="en">
<head>
<title>How to display a dialog box in the page?</title>
</head>
<body>
<h3>How to display a dialog box in the page?</h3>
<button id="open-dialog">Open Dialog</button>
<dialog id="my-dialog">
<h2>Dialog Box Title</h2>
<p>Dialog Box Content</p>
<button id="close-dialog">Close</button>
</dialog>
<script>
const openButton = document.getElementById('open-dialog');
const dialog = document.getElementById('my-dialog');
const closeButton = document.getElementById('close-dialog');
openButton.addEventListener('click', () => {
dialog.showModal();
});
closeButton.addEventListener('click', () => {
dialog.close();
});
</script>
</body>
</html>
Example 2
In this example, we will follow the above code pattern, and display a dialog box using the window prompt and confirm API.
Filename: index.html
<html lang="en">
<head>
<title>How to display a dialog box in the page?</title>
</head>
<body>
<h3>How to display a dialog box in the page?</h3>
<button onclick="showPrompt()">Open Dialog using prompt</button>
<button onclick="showPrompt()">Open Dialog using confirm</button>
<script>
function showPrompt() {
const result = prompt("Enter your name:");
if (result !== null) {
alert("Hello, " + result + "!");
}
}
function showConfirmation() {
const result = confirm("Are you sure you want to delete this item?");
if (result === true) {
alert("Item deleted successfully!");
} else {
alert("Deletion canceled.");
}
}
</script>
</body>
</html>
Conclusion
In this article, we learned how to display a dialog box on the webpage with the help of the native dialog HTML element, and its showModal and close methods. In the first example, we created a basic dialog box, and in the second example, we used the window confirm and prompt APIs. The dialogs have many practical use cases such as confirmation dialogs, or information display dialogs, or information gathering dialogs. They can also be utilized for login or authentication purposes. For example, when a user clicks on a "Login" button, a dialog box can appear to collect their credentials, providing a more focused and intuitive login experience.
463 Views
