Create an AlertBox with no hassle!
Explore the docs »
Report Bug
·
Request Feature
In fact, I needed a javascript library where I always wanted to create alerts
and popups
without losing any time. It's also really annoying to spend my time making different popups
and alerts
with different designs.
So I spent my time up:
- built a library just with javascript so libraries like jQuery no longer needed
- To make a warning message for myself and the users who are tired of writing long codes
- With just a few lines of code writing, you can create alerts and popups that even change their designs
Of course, your needs can not be addressed with this library alone, and maybe you need more than that, so I'm going to update this library to be able to meet the maximum needs.
In fact, I created this library alone, but I also asked some questions about the problem.
This section should list any major frameworks that you built your project using. Leave any add-ons/plugins for the acknowledgements section. Here are a few examples.
To launch and use the alertBox in your project, follow the steps below.
You must first download the alertBox library from its GitHub and add it to your project.
- First, go to the alertBox page
- Then download that package and add it to your project
- To add the necessary CSS, you must first go to the Css Folder in the package and add the
alertBox.min.css
file to your css files. - Also, to add JS files, you must log in to the Js Folder and add the
alertBox.js
file to your js files.
To work with this library, we already defined a constant variable and set it equal to the alertBox
.
- Alert
- To create an alert, you must first call the addAlert function. This function receives two parameters
- The first parameter of this function is a string that contains the text inside the alert
- The second parameter of this function is a multiplicity of objects (although giving these values is arbitrary because the defaults are predefined)
Object Value | Application | Acceptable values |
---|---|---|
position | set alert box position | 'left', 'right' , 'center' |
status | determine the status of the alert box | 'simple' , 'success', 'error' |
align | set the text orientation of the alert box | 'left' , 'right', 'center' |
animateDelay | latency in the alert box view | NUMBER (s) : 0 |
animateDuration | When it will take time for the alert box to be in position | NUMBER (s) : 1 |
boxDuration | The amount of time the alert box is in position | NUMBER (s) : 2 |
alertBox.addAlert('This is a message',{
position:'left',
status:'error',
align:'center',
animateDelay:0.1,
animateDuration:1,
boxDuration:3
});
- Popup
- To create a popup, you must use the
addPopup
function - This function receives two parameters. The first parameter of this function is an object that receives a series of values, and the second parameter of this function is a function called callback
- The second parameter of this function receives a default value in the array, which is the first key of this array, the name of the button and the second key of the array, the number of the button that is clicked on it.
Object Value | Application | Acceptable values |
---|---|---|
title | setting the subject | STRING: 'Subject: title' |
message | set text message | STRING : 'message' |
duration | the amount of animation time | NUMBER (s) : 1 |
delay | latency in the popup view | NUMBER (s) : 0 |
headerAlign | setting the subject orientation | 'left' , 'right', 'center' |
textAlign | setting the message orientation | 'left' , 'right', 'center' |
buttonAlign | setting the buttons orientation | 'left' , 'right', 'center' |
buttonWidth | setting the buttons width | NUMBER : 85 |
buttons | The buttons you want to display in the popup | Object : {buttonName:'status' } |
visible | black background display | true , false |
hideClose | display the exit icon | true, false |
alertBox.addPopup({
duration:2,
title:'SUBJECT',
message:'MESSAGE',
headerAlign:'center',
textAlign:'left',
buttonAlign:'right',
buttonWidth:90,
button:{
Confirm:'success',
Cancel:'error'
},
visible:false,
hideClose:true
},(result) => {
alert(result[0]+' : '+result[1]);
});
Distributed under the MIT License. See LICENSE
for more information.
Edward Joseph (Ali Yaghoby) - Edward_Joseph - dev.edwardjoseph@gmail.com
Project Link: alertBox