https://github.com/amaterasusan/notification
Pop-up notifications is a Javascript library for pop-up messages on a web page. Pure javascript and css, any dependencies.
https://github.com/amaterasusan/notification
alert dialog javascript notification notifications popup toast
Last synced: 3 months ago
JSON representation
Pop-up notifications is a Javascript library for pop-up messages on a web page. Pure javascript and css, any dependencies.
- Host: GitHub
- URL: https://github.com/amaterasusan/notification
- Owner: amaterasusan
- License: mit
- Created: 2021-09-14T13:58:32.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-13T17:23:28.000Z (about 1 year ago)
- Last Synced: 2024-05-14T21:25:23.626Z (about 1 year ago)
- Topics: alert, dialog, javascript, notification, notifications, popup, toast
- Language: JavaScript
- Homepage: https://amaterasusan.github.io/notification/
- Size: 188 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Notification
\
**Popup notifications** is a lightweight Javascript library for popup messages on a web page. Pure javascript and css, any dependencies. You can use it as toast messages or a single notification.
## Live Demo
[Click here](https://amaterasusan.github.io/notification/)
## Getting Started
### Just include files in the HTML:
``\
``
### Or use it as an ES module in your project:
```javascript
import Notification from 'path/to/notification-es.js';
```
## options
All options are optional
* **position**\
top-right (default value)\
bottom-right\
top-left\
bottom-left\
center
* **duration**\
default 5000\
time in milliseconds the notification will be displayed\
if duration is 0 - popup notification will be displayed all the time
* **isHidePrev**\
default false\
hide previous popup(s) or not
* **isHideTitle**\
default false\
hide title block or not\
if it is set to true and the duration is 0,\
an X close button will appear on the right side of the notification body to allow the popup to close.
* **maxOpened**\
default 5, the maximum value can be set to 10
## Usage
```
const popup = Notification({
position: 'top-left',
duration: 4000,
isHidePrev: false,
isHideTitle: false,
maxOpened: 3,
});
// or
const popup = Notification(); // options will be set by default
// then later you can set any options like
popup.setProperty({
duration: 5000,
isHidePrev: true,
});
```
### the following popup methods are available:
* error
* warning
* info
* success
* dialog
* setProperty
* hide
```
// error
popup.error({
title: 'Oops',
message: `An error has occurred"`,
});
// or even insert HTML
popup.error({
title: `
Oops`,
message: `
`,
});
// info
popup.info({
title: 'Info',
message: 'Info message'
});
// warning
popup.warning({
title: 'Warning',
message: 'Warning message'
});
// success
popup.success({
title: 'Success',
message: 'Success message'
});
```
### Dialog
If use "Confirmation dialog" two buttons are available [Ok] and [Cancel].\
The popup display time here will not matter even if it has been set,\
callback function is called when any of the buttons is pressed.\
You can also insert HTML.
```
popup.dialog({
title: 'Confirm',
message: 'Confirm message',
callback: (result) => {
console.log('result = ', result)
}
});
/*
Example with HTML
you can pass a validation function to be able to check the filled fields in the form and
not to close the popup immediately after clicking [Ok]
*/
const validTextarea = () => {
let valid = true;
const textarea = document.querySelector('textarea[name="your_mess"]');
if (textarea.value.trim() === '') {
valid = false;
textarea.focus();
}
return valid;
};
popup.dialog({
title:
Send',
message: `
`,
callback:(result) => {
console.log('result = ', result)
},
validFunc: validTextarea,
});
```
## Authors
👤 **Helen Nikitina**
- Twitter: [@twitterhandle](https://twitter.com/@HelenNikit1ina )
## License
[](https://github.com/amaterasusan/notification/blob/master/LICENSE)
[](https://www.buymeacoffee.com/amaterasu.san)