Sliding Popup Box In JavaScript And CSS3 – WhoopsJs

Category: Javascript , Notification | September 13, 2018
Views Total:1,218 views
Official Page:Go to website
Last Update:September 13, 2018


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>

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

You Might Be Interested In:

Leave a Reply