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.
<link href="path/to/notification.css" rel="stylesheet"/>
<script src="path/to/notification.js"></script>
import Notification from 'path/to/notification-es.js';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
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,
});
- error
- warning
- info
- success
- dialog
- setProperty
- hide
// error
popup.error({
title: 'Oops',
message: `An error has occurred"`,
});
// or even insert HTML
popup.error({
title: `<div class="title-cust title-error">Oops</div>`,
message: `<div class="wrapper-notification">
<div class="icons icon-error"></div>
<div class="message message-text-error">An error has occurred</div></div>`,
});
// info
popup.info({
title: 'Info',
message: 'Info message'
});
// warning
popup.warning({
title: 'Warning',
message: 'Warning message'
});
// success
popup.success({
title: 'Success',
message: 'Success message'
});
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: <div class="title-cust title-dialog">Send</div>',
message: `<div class="label-message">Your message<span class="asterisk">*</span>:</div>
<textarea name="your_mess" rows="3"></textarea>`,
callback:(result) => {
console.log('result = ', result)
},
validFunc: validTextarea,
});
👤 Helen Nikitina
- Twitter: @twitterhandle
