popup-alert v1.0.2
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.