Simple Animated Alert Box In Vanilla JavaScript

Preview:

Description:

Creating your very own custom alert box is easy with the help of Pure JavaScript. There’s really no excuse to forget important messages and lose your visitors.

Here is a simple and lightweight JavaScript library for creating custom animated alert boxes on your site. The layout and color of the box itself as well as the wording inside can all be changed by altering the CSS styles. Great for providing feedback, warnings, and other types of information to your users without interrupting their browsing experience.

How to use it:

1. Load the main script ‘alert-box.js’ in the document.

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

2. Display a basic alert box on page load.

customAlert('A custom alert Box.');

3. The required CSS styles for the alert box.

.custom-alert-box {
  position: absolute;
  top: 0%;
  padding: 20px;
  font-size: 16px;
  color: #ffffff;
  background-color: #58a6eb;
  animation: alert-box 1s ease;
}
@keyframes alert-box {
  0% {
    top: -10%;
  }
  100% {
    top: 0%;
  }
}

4. Enable a button to toggle the alert box.

<button id="trigger">
  Cick Me
</button>

alertOnClick('trigger','Trigger On Click');

5. Apply more styles to the alert box.

customAlert('Custom alert Box.','allow','custom-class');
// or
alertOnClick('trigger', 'Custom Alert Box.','allow','custom-class');

.custom-class {
  /* your own styles here */
}