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 Create Customizable Alerts in JavaScript?
It is crucial to remain updated with the most recent knowledge in the fast-paced world of today. Making customizable notifications in JavaScript is one approach to accomplish this. Users may get vital messages catered to their own requirements with customizable alerts.
Syntax
function Alert(message, alert type)
Message parameter gets string as input to be displayed on the alert box.
Alert type − the type of message such as error, emergency, etc
The Alert type parameter specifies the type of message, such as error, emergency, prompt, etc, that is displayed.
Example 1
We will generate an alert message box in HTML using Javascript code. The alert message will be shown by clicking on a button. Let's create a simple alert message box with a close button to end the alert box display.
Algorithm
Step 1 − The initial step is to write the HTML code and CSS styling code of the alert box. You can also use any CSS code for styling the alert box.
Step 2 − In the next step prepare Javascript code to set the operation of the button to show the alert box. For this reason use the showAlert() method that takes two parameters: message to display and alert type.
Step 3 − In the next step display the alert box by calling the showAlert() function. We will add an event listener to a button on the page that will call the function directly in the JavaScript section.
Step 4 − In this step add more parameters to the alert method to customize the alert box.
<!DOCTYPE html>
<html>
<head>
<title>
Window alert() Method in HTML
</title>
<style>
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>Customizable Alert</h1>
<p>
Click button to get an alert
</p>
<button onclick="myalert()">
Show Alert Message
</button>
<script>
function myalert() {
alert("Hello Tutorials Point Viewersn " +
"click OK to" +
" close me");
}
</script>
</body>
</html>
Example 2
Lets create a unique type of custom alert box. This alert will show the current date and time on the screen. To check the time one will have to click on the button. By doing so an alert box will appear having date and time written on it.
Algorithm
Step-1 − start the program by writing HTML and CSS code.
Step-2 − Once you are done with HTML write javascript functions to set the basic functionalities of the alert box.
Step-3 − Write a script to show the current date and time on an alert box.
<!DOCTYPE html>
<html>
<head>
<title>Custom Alert Box</title>
<style>
.custom-alert {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
border-radius: 5px;
}
.custom-alert h2 {
margin: 0;
}
</style>
</head>
<body>
<button onclick="showCustomAlert()">Show Custom Alert</button>
<script>
function showCustomAlert() {
var currentDate = new Date();
var currentTime = currentDate.toLocaleString();
var alertBox = document.createElement('div');
alertBox.classList.add('custom-alert');
var heading = document.createElement('h2');
heading.textContent = 'Custom Alert';
alertBox.appendChild(heading);
var timeLabel = document.createElement('p');
timeLabel.textContent = 'Current Time and Date: ' + currentTime;
alertBox.appendChild(timeLabel);
document.body.appendChild(alertBox);
}
</script>
</body>
</html>
Conclusion
Creating customizable alert boxes in JavaScript may improve the user experience on web apps by giving more aesthetically appealing and useful means of communicating with users. The important steps in making customized alert boxes include writing the HTML and CSS for the alert box itself and utilizing JavaScript to dynamically set the style attributes and content based on user input. Web developers should keep this strategy in mind when creating user interfaces that demand regular user input or notifications.
175 Views
