A Simple and Customizable JavaScript Code for Your Web Page https://www.npmjs.com/package/popup-alert
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>
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();
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.