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 using JavaScript

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.

Design HTML Part

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’.

Add JavaScript

Now we will write the JavaScript part which will provide the support at the backend of alert box.

Steps to write JavaScript code to create a custom alert box −

  • 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.

Add CSS

Now we will write the CSS code to provide the styling to the alert box.

Steps to write the CSS code to create a custom alert box are given as −

  • 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>
<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" value = "Click Me" onclick = "myfunction();"
   />
</body>
<head>
   <script>
   function myfunction(note, done) { 
      var box = $("#ready"); 
      box.find(".message").text(note);
      box.find(".btn").unbind().click(function() { 
         box.hide();
      });
      box.find(".btn").click(done); box.show();
   }
   </script>
   <style>
      #ready {
         display: none;
         background-color: #f10044; 
         border: 1px solid #aaa; 
         position: fixed;
         width: 250px; 
         left: 50%;
         margin-left: -100px; 
         padding: 6px 8px 8px; 
         box-sizing: border-box; 
         text-align: center;
      }
      #ready button {
         background-color: #00ff56; 
         display: inline-block; 
         border-radius: 50%; 
         border: 1px solid #aaa; 
         padding: 5px;
         text-align: center; 
         width: 80px; 
         cursor: pointer;
      }
      #ready .message { 
         text-align: center;
      }
   </style>
</head>
</html>

A button will appear and when you click it the alert box will appear on screen and when you click the OK button in alert box than the box will disappear.

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.


Advertisements