Pages UI
Search…
Notifications
Use Pages Notification plugin that has been custom-made to suit overall theme, to add unique notifications of various styles
Show a sliding bar from top or bottom that fits the screen width
1
<script>
2
$(document).ready(function() {
3
// Apply the plugin to the body
4
$('body').pgNotification(options).show();
5
});
6
</script>
Copied!

Options

NAME
TYPE
DEFAULT
DESCRIPTION
style
string
'simple'
Sets the style of the notification. Styles available are 'bar', 'flip', 'circle', 'simple'
message
string
null
Message to be displayed inside the notification.
position
string
'top-right'
Where to place the notification. Positions available are:topbottomtop-righttop-leftbottom-rightbottom-leftNote: Use 'top' and 'bottom' only for positioning 'bar' notification
type
string
'info'
Sets the type of the notification - 'info', 'warning', 'success', 'danger'.Changing the type will change the background color and font color of the notification
showClose
boolean
true
Show/Hide the close button
timeout
number
4000
Decides for how long the notification should be visible on the screen in miliseconds. Setting timeout 0 will keep notification forever.
onShown
function
null
Callback function fired after the notification is shown
onClose
function
null
Callback function fired after the notification is closed
title
string
null
Only available for style 'circle'. Sets the title of the notification
thumbnail
string
null
Only available for style 'circle'. Shows a thumbnail image together with the messageAny img can be passed. The following structure is recommended<img width="40" height="40" style="display: inline-block;" src="assets/img/profiles/avatar2x.jpg" data-src="assets/img/profiles/avatar.jpg" data-src-retina="assets/img/profiles/avatar2x.jpg" alt="">
Last modified 3yr ago
Copy link
Contents
Options