- Trending Categories
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 change button label in alert box using JavaScript?
In this tutorial, we will learn to change the button label in the alert box using JavaScript. The alert box is one kind of popup box that is useful to show some important information to the user. We can pop up the alert box using JavaScript's alert() method.
The default alert box contains the simple message and ok button, which pops out at the top center of the browser's screen.
The default alert box with only messages and without any style looks weird. So, we need to make it stylish and change the style of the button and the label text of the button.
However, we can’t change the default alert box's style but can create the custom alert box using JavaScript and set its position at the top center.
Here, we will create the custom alert box using JavaScript and JQuery both.
Creating the Custom Alert Box in JavaScript
In this section, we will learn to create the custom alert box and add the button into that at the right bottom and set the label of it according to our requirements.
We will use the raw HTML, CSS, and JavaScript to create and add behavior to the alert box. When a user clicks the button, we will set ‘display: block’ for the alert div. If the user clicks the close button in the alert box, we will set the ‘display: none’ to the alert div.
Syntax
Here is the syntax to create the alert box and add a button at the right bottom corner.
<div id = “alert” >
Add content for the alert box and style it using CSS
</div>
<script>
var alertDiv = document.getElementById("alert");
// Showing the alert box
function popupAlert() {
alertDiv.style.display = "block";
}
// Hiding the alert box
function closepopup() {
alertDiv.style.display = "none";
}
</script>
Example
In the below example, we have created the alert div. We have also given the style to the alert div such as background-color, height, width, etc. Also, we have added the customized close button to the alert box.
When a user clicks on the show alert button, we call a JavaScript function, which will change the display: none to display: block, and when the user clicks on the close button, it does reverse.
<html> <head> </script> <style> #alert { display: none; background-color: yellowgreen; border: 1px solid green; color: black; position: fixed; width: 450px; height: 100px; left: 17%; top: 2%; padding: 6px 8px 8px; text-align: center; } #close { border-radius: 12px; height: 2rem; padding: 7px; cursor: pointer; border: 2px solid green; background-color: aqua; position: absolute; right: 20px; bottom: 20px; } </style> </head> <body> <h2> Change button label to alert / confirmation box. </h2> <h4> Creating custom alert box using JavaScript. </h4> <div id = "alert"> <p> Welcome to the tutorialsPoint! </p> <button id = "close" onclick = "closepopup()"> Close alert box </button> </div> <button onclick = 'popupAlert();'> Show alert </button> <script> var alertDiv = document.getElementById("alert"); function popupAlert() { alertDiv.style.display = "block"; } function closepopup() { alertDiv.style.display = "none"; } </script> </body> </html>
In the above output, users can see that when they click on the show alert button, it pops up the alert div on the screen which contains the welcome message and customized close button.
Create the custom alert box using the jQuery Dialog() Method
In this section, we will use the dialog() method of the JQuery, which converts any div into the dialog box. It doesn’t show any default alert box but the customized alert box, as we have created in the above section.
Syntax
Follow the below syntax to create a custom dialog box and change the button label using the jQuery dialog() method.
<div id = “dialogBox” >
// Add content for the alert box and style it using CSS
</div>
<script>
// convert div as a dialog
$(function () {
$("#dialogBox").dialog();
});
</script>
Example
In this example, first, we have added the JQuery CDN to the <head> section of the HTML. After that, we created the div and added the button to that. We have also set the position of the button at the bottom right.
Next, we applied the jQuery dialog() method to the div to make it pop up. When the user reloads the webpage, it will show the pop-up box.
<html> <head> <!-- jquery CDN for dialog boxes --> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"> </script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script> <!-- CSS --> <style> .ui-widget-header { background: aqua; color: blue; font-size: 18px; } #dialog { text-align: center; } button { padding: 5px; position: absolute; right: 5px; bottom: 0px; background-color: aqua; } </style> </head> <body> <h2> Change button label to alert / confirmation box. </h2> <h4> Changed the button label using JQuery Dialog() method. </h4> <!-- content of the dialog box. --> <div id = "dialog" title = "Alert Box"> <p> Welcome to the tutorialsPoint! </p> <button> Submit Button </button> </div> <script> // pop up the dialog box when web page loads $(function () { $("#dialog").dialog(); }); </script> </body> </html>
When user invokes the above code, they will see a customized dialog box on the screen, which contains the submit button at the bottom right of the dialog box. However, we haven’t added any functionality to submit but we have just changed the label of the button.
In this tutorial, we have learned to customize the button label of the alert box. Furthermore, we have also learned to customize the whole alert box rather than customizing the button only. In the second example, we have changed the style and color of the jQuery dialog box.
4K+ Views
