Sliding Popup Box In JavaScript And CSS3 – WhoopsJs

The WhoopsJs JavaScript plugin for creating CSS3 animated popup boxes for notification messages.

Comes with 4 built-in notification types: default, success, warning, and danger.

How to use it:

Import the WhoopsJs plugin’s JavaScript and Stylesheet as follows:

<link rel="stylesheet" href="css/main.css">
<script src="js/main.min.js"></script>

Create the container for the popup box.

<div class="whoops-container" role="alert" aria-hidden="false">
  <div class="whoops default">
    <p>Welcome to Whoops.js!</p>
    <button type="button" class="whoops-btn whoops-btn--close">Close</button>
  </div>
</div>

Display a default notification popup box on the screen.

var whoops = new Whoops({
    message: "Hello World!"
});

Change the default type (theme) of the notification popup box.

var whoops = new Whoops({
    message: "Hello World!",
    type: "warning" // success, danger
});