Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to design a custom alert box using JavaScript?
In this tutorial, we are going to create one custom alert box using JavaScript. The alert box signifies a box that appears with some message on it whenever you click a button and if we add some styling to the box and mould it according to our requirements then it will be a custom alert box.
Approach to Design Custom Alert Box
To create a custom alert box, we will use a jQuery library which is used to simplify the HTML DOM manipulation and it also provides us with better use of event handling and CSS animation with JavaScript. jQuery wraps many lines of code into a single method which can be used to perform many small tasks only with a simple line of code.
So, to create a custom alert box we need to write code using HTML, CSS, and JavaScript.
HTML Structure
Let's start with the HTML code. Steps to writing HTML code to create a custom alert box:
Create a script tag and link the jQuery file to the code so that we can use its methods.
Create a division tag with an id named "ready".
Inside the division tag create another division tag with the class name "message" which will contain a message we want to print in the alert box.
Now create a button using a button tag with a class name btn.
At last, create an input type button outside the div tag which will be used to call a function named 'myfunction'.
JavaScript Implementation
Now we will write the JavaScript part which will provide the support at the backend of alert box. Steps to write JavaScript code:
Define the function which was declared above as myfunction with two parameters declared inside it.
Create a variable named as box calling the div id.
Now we will show the message inside the box using the text() method.
In this step the unbind() method will remove all the event handlers and hide the alert box whenever the ok button clicked.
In the last step the click() method will be used to handle the alert messages.
CSS Styling
Now we will write the CSS code to provide the styling to the alert box. Steps to write the CSS code:
Firstly, we will style the whole division tag ready which is our alert box.
For the alert box we will provide the background color, margin, padding, position, border, and sizing.
Now will style the button present inside the alert box by providing it color, margin, radius, border, and width. Also align the text to the centre.
At last, provide the styling to the text present in the alert box by aligning the text.
Example
We can use the below code to create a custom alert box:
<!DOCTYPE html>
<html>
<head>
<style>
#ready {
display: none;
background-color: #f10044;
border: 1px solid #aaa;
position: fixed;
width: 250px;
left: 50%;
margin-left: -125px;
top: 20%;
padding: 20px;
box-sizing: border-box;
text-align: center;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
z-index: 1000;
}
#ready button {
background-color: #00ff56;
display: inline-block;
border-radius: 5px;
border: 1px solid #aaa;
padding: 8px 15px;
text-align: center;
width: 80px;
cursor: pointer;
margin-top: 10px;
font-weight: bold;
}
#ready .message {
text-align: center;
color: white;
font-size: 16px;
margin-bottom: 15px;
}
.trigger-btn {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="ready">
<div class="message">Hello. I am JavaScript</div>
<button class="btn">OK</button>
</div>
<input type="button" class="trigger-btn" value="Show Custom Alert" onclick="myfunction('Custom Alert Message!', function(){ console.log('Alert closed!'); });" />
<script>
function myfunction(note, done) {
var box = $("#ready");
box.find(".message").text(note);
box.find(".btn").unbind().click(function() {
box.hide();
if (done) done();
});
box.show();
}
</script>
</body>
</html>
How It Works
The custom alert box works through these key components:
HTML Structure: A hidden div container with message area and OK button
JavaScript Function: The
myfunction()accepts a message and callback, displays the alert, and handles the close eventCSS Styling: Positions the alert centrally with custom colors, shadows, and responsive design
Event Handling: jQuery manages the show/hide functionality and button clicks
Enhanced Features
To make the alert box more effective we can also add more buttons like one for YES and another for NO or we can provide more than one messages as well as we can link one alert box to another alert box by connecting the button between two boxes. The messages can be more decorated by providing background color and other animation effects.
Note: To create a custom alert box we can also use the SweetAlert Library file which provides a CDN file to enable the Swal.fire() method for more advanced alert boxes with built-in animations and themes.
Conclusion
Custom alert boxes provide better user experience than browser's default alerts. Using HTML, CSS, and JavaScript with jQuery, you can create fully customizable alert dialogs that match your website's design and branding.
12K+ Views
