Sweet Alert Message In JavaScript – as-alert-message

Category: Javascript , Modal & Popup | December 15, 2020
Author: ahmadsopyan9
Views Total: 681 views
Official Page: Go to website
Last Update: December 15, 2020
License: MIT

Preview:

Sweet Alert Message In JavaScript – as-alert-message

Description:

as-alert-message is a tiny JavaScript popup library used to create animated, customized, sweet alert/confirm dialog boxes on pages.

Features:

  • 4 alert types: Default, Error, Warning, Success.
  • Custom close button.
  • Auto redirects the page to another one after confirmation.

How to use it:

1. Add the stylesheet as-alert-message.min.css and JavaScript as-alert-message.min.js to the page.

<link rel="stylesheet" href="css/as-alert-message.min.css" />
<script src="js/as-alert-message.min.js"></script>

2. Display a basic alert message on the screen.

asAlertMsg("Hello World!");

3. Or define the alert title & message in the JavaScript.

asAlertMsg({
  title: "Title",
  message: "Message"
});

4. Determine which alert type you wish to use.

asAlertMsg({
  type: "success",
  title: "success message",
  message: "success message",
});

asAlertMsg({
  type: "warning",
  title: "warning message",
  message: "warning message",
});

asAlertMsg({
  type: "error",
  title: "error message",
  message: "error message",
});

5. Add a custom close button to the alert box.

asAlertMsg({
  type: "success",
  title: "success message",
  message: "success message",
  button: {
    title: "Close Button",
    bg: "success"
  }
});

6. Redirect the page to a URL you provide.

asAlertMsg({
  type: "success",
  title: "success message",
  message: "success message",
  button: {
    title: "Success Button",
    bg: "success"
  },
  success: {
    redirect: ["https://cssscript.com","_blank"]
  }
});

You Might Be Interested In:


Leave a Reply