customAlertBoxPlugin

Custom Alert Box Plugin Using JavaScript and CSS

Author: Suraj Aswal

Must Include CSS Code/Default Custom Alert Box Class:

/* must include css */
.custom-alert-box {
  position: absolute;
  top: 0%;
  padding: 20px;
  font-size: 16px;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #58a6eb;
  animation: alert-box 1s ease;
}
@keyframes alert-box {
0% {
top: -10%;
}
100% {
top: 0%;
}
}

You can also include your custom CSS to the alert box.

This Plugin has two type of Alert Boxes:

1). Alert Box on page load
2). Alert Box on Click the button.

Alert Box will automatically disappear after 4 seconds.

Demo link => Click for Demo

How to use this plugin?

Step 1:

Download the alert-box.js file.

Step 2:

Include the alert-box.js file to your HTML file

   <script src="alert-box.js"></script>

Step 3:

(1) Call customAlert() function for alert box on page load.
(2) Call alertOnClick() function for alert box on click.

<script defer>
   customAlert('This is custom alert Box !'); //alert box on load
   alertOnClick('alert-b', 'Custom Alert Box onClick'); //alert box on click
 </script>  

customAlert() function will take three arguments

1. message
2. allow custom css (optional)
3. custom css className (optional)

Example:

<script defer>
  customAlert('This is custom alert Box !','allow','custom-class-name');
</script>

alertOnClick() function wil take four arguments

1. Id Name of the element on which you want to apply onclick event.
2. message
3. allow custom css (optional)
4. custom css className (optional

Example:

<script defer>
  alertOnClick('alert-b', 'Custom Alert Box onClick','allow','custom-class-name');
</script>

Note: By allowing custom css you give your own styling to the alert box.