JavaScript

How to Create Custom Alert Box in JavaScript

In JavaScript, we often want to create web pages having customized alert boxes to make a web page more attractive. Moreover, some additional functionalities can also be added in the alert box for the purpose of customization. In such cases, creating a custom alert box makes your development life easier and enhances the appearance of the website.

This blog will illustrate the methods for creating custom alert boxes in JavaScript.

How to Design a Custom Alert Box in JavaScript?

For creating a custom alert box in JavaScript, you can utilize:

We will now go through each of the two approaches one by one!

Method 1: Create a Custom Alert Box in Javascript Using SweetAlert Library

SweetAlert is a JavaScript library used to customize alerts in web applications and websites with the help of a button. You can utilize its “Swal.fire()” method to create an alert box and customize it using CSS. It can be done by specifying the “Content Delivery Network” (CDN) link of the SweetAlert library in the “<script>” tag for accessing it.

Example

In the example below, we will load the “JQuery” file and “CDN” file in our script tags as follow:

<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>

Now, we will apply CSS on the button. Its styling include the “padding” which will set the overall area of button to 15px, and “text-align” will align the text to center:

<style type= "text/css">
        button {
            padding: 15px;
            text-align: center;
        }
</style>

Then, create a “button” named Enable Custom Alert Box which will trigger the alert box and assign “showAlert” as its id which will be accessed by the JavaScript function:

<main>
        <button id= "showAlert">Enable Custom Alert Box</button>
</main>

Lastly, access the specified button id and apply the “click()” method on it. As a result, when the button is clicked, the “Swal.fire()” method will return the corresponding text in an alert box:

<script>
    $("#showAlert").click(function(){
        Swal.fire(
            'This is a customized alert box.',
        )
    });
</script>

The output of the above implementation will result as follows:

Method 2: Create Custom Alert Box in Javascript Using JQuery Library

JQuery is a JavaScript library that makes event handling much simpler to implement with an easy-to-use API. You can utilize it to get the id and class of the alert box and apply different methods to them for creating a customized alert box.

The below example explains the stated concept.

Example

Firstly, we will load the JavaScript library “JQuery” in our program:

<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Now, initialize the “div id”, “div class” and “button class” in the HTML file:

<div id= "confirm">
      <div class="message">This is a customized alert box.</div>
       <button class="ok">OK</button>
</div>

In the below step, we will include a button named “Enable Custom Alert Box”. It will function in such a way that when the button will be clicked, the “onclick” event will trigger the “showAlert()” method:

<input type= "button" value= "Enable Custom Alert Box" onclick= "showAlert();"/>

After that, we will define the function showAlert() which accepts two arguments. In its body, we will access the div id, fetch the div class message, and button class. The “text()” method will return the text content of the message, and the “unbind()” method will remove the event handlers from the message. When its button is clicked, the alert box will hide. Lastly, the “click()” method will be applied for handling message on the alert box:

<script>
         function showAlert(msg, ok) {
            var confirmBox= $("#confirm");
            confirmBox.find(".message").text(msg);
            confirmBox.find(".ok").unbind().click(function() {
               confirmBox.hide();
            });
            confirmBox.find(".ok").click(ok):
            confirmBox.show();
         }
</script>

Style the custom alert box for making it attractive:

<style>
         #confirm {
            display: none;
            border: 1px solid;
            position: fixed;
            width: 250px;
            left: 50%;
            margin-left: -100px;
            padding: 25px;
            text-align: center;
         }  
</style>

Output

We have discussed different creative methods to create Custom Alert Box in JavaScript. You can apply any of the methods according to your requirement.

Conclusion

To create a custom alert box in JavaScript, you can use the “SweetAlert library, which includes a “CDN” file to enable the “Swal.fire()” method, and “JQuery” library, which will load the JQuery library in the project, fetch various attributes of the alert box and apply different functionalities on the alert box. This article explained the methods for creating custom alert boxes using JavaScript.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.