AS POPUP JS
AsPopup.js is a javascript library for creating beautiful, customizable popups, alerts, confirms, prompts, toasts.

Normal Alert
              alert("You clicked the button");
AsPopup.js Alert
              as.alert({
  icon: true,
  title: "You clicked the button"
});
😍 Installation
You can install it on your html page by adding a script tag with src given below.
https://asbros.github.io/popup.js/popup.js
Toast
You can create toasts.
If you will not give timer, the toast will not disappear.
as.toast({
    title: "You have passed the test !",
    timer: 2500
});

clickToClose toasts.
If clickToClose is true, then if you click the toast, it will disappear.
as.toast({
    clickToClose: true,
    title: "You have passed the test !",
    timer: 2500
});

Types of toasts.
There are 5 types of toasts except default - success, error, warning, info, question
as.toast({
  type: "success",
  title: "Your changes have been saved.",
  timer: 2000
});


A custom positioned toast.
There are 6 positions you can give - top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
as.toast({
  position: "top-center",
  title: "Your changes have been saved.",
  timer: 2000
});


Loader
You can create loading popups.
var loader = as.loader();
loader.show({
  timer: 3000,
  onHide: function(){
    as.toast({
      title: "Loader disappeared.",
      timer: 1500
    });
  }
});

loader.show() arguments:-
title(string): Title of the loader, default is "Loading..."
timer(number): The time, after which the loader will disappear. onHide(function): Function called after the timer ends.
icon(string - image source): Image for Loader.

loader.hide();
You can give function inside loader.hide(), that function will be executed when the loader disappears.
var loader = as.loader();
loader.show();
fetch("https://api.github.com/users/google")
.then(x => {return x.json();})
.then(x => {
   loader.hide(function (){
     as.popup({
      image: x.avatar_url,
      title: x.name,
      text: x.type
     });
   });
});

Alert
You can create Popup Alerts.
as.alert({
  title: "Hello, I am title",
  text: "I am text",
  icon: true
});

You can also give the value of icon false.

Alert with image url.
as.alert({
  title: "Hello, I am title",
  text: "I am text",
  icon: false,
  image: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/OOjs_UI_icon_alert-warning.svg/1024px-OOjs_UI_icon_alert-warning.svg.png"
});

Confirm
You can create Confirmation Popups.
as.confirm({
  title: "Are you a web developer ?",
  text: 'Click "OK" to yes & click "Cancel" to no.',
  icon: true,
  onConfirm: function(){
    as.popup({
     icon: "success",
     text: "Wow, this library will help you to build your website"
    });
  },
  onCancel: function(){
    as.popup({
     icon: "error",
     text: "Sorry, this library is only available for web."
    });
  }
});

You can also give the value of icon false.

Alert with image url.
as.confirm({
  title: "Is there a dog ?",
  icon: false,
  image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMxBBstFvh6rsvxD8JgNAayA95dYmhv6ZZDQ&usqp=CAU",
  okBtnHtml: "Yes",
  cancelBtnHtml: "No",
  onConfirm: function(){
   as.toast({
    title: "Correct",
    timer: 2000,
    type: "success"
   });
  },
  onCancel: function(){
   as.toast({
    title: "Wrong",
    timer: 2000,
    type: "error"
   });
  }
});

Prompt
You can create Prompt Popups.
as.prompt({
  title: "Welcome",
  text: " Please enter your name",
  icon: true
});