Popup Alert

A Simple and Customizable JavaScript Code for Your Web Page https://www.npmjs.com/package/popup-alert

Installation

To begin using Popup Alert, you first need to install the package from npm. Simply run the following command:

npm i popup-alert

Next, you need to link the CSS and JS files to your project. Use the following code:

<link rel="stylesheet" href="/node_modules/popup-alert/app.css" />

<script src="/node_modules/popup-alert/index.js"></script>

Code Explanation

Popup Alert works by creating an object of the Alert class in JavaScript. You can use the following code to create an alert:

const alert = new Alert({
  text: "this is test text",
});

To display the alert, use the "show()" method:

alert.show();

Customizing

Popup Alert offers several parameters for customization. You can use the following code to customize the alert box:

const alert = new Alert({
  text: "this is text",
  textColor: "#fff",
  bgColor: "#474e68",
  buttonText: "OK",
  buttonTextColor: "#fff",
  buttonBgColor: "#007bff",
});

The available parameters are:

Parameter	Type	Description
text	string	title of alert
textColor	string	color of title
bgColor	string	alert box background color
buttonText	string	text of alert button
buttonTextColor	string	button text color
buttonBgColor	string	button background color

If you want the alert box to automatically hide after a certain amount of time, use the following code:

alert.show({
  enabled: true,
  time: 1000,
});

The "enabled" parameter is used to enable or disable the timer, and the "time" parameter is used to set the time in milliseconds before the alert box automatically hides.