customAlertBoxPlugin

Custom Alert Box Plugin Using JavaScript and CSS

/* 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%;
}
}

How to use this plugin?

Step 1:

Step 2:

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

Step 3:

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