Last Updated:
September 29, 2021
by
Muskan Purohit
| Version: 3
| 1,445 views
| 0 followers
members are following updates on this item.
Various UI elements can be instantiated on the Igloo platform out of the box. In addition, there is nothing stopping a Developer from creating their own or using a popular 3rd-party library. We have a custom implementation of Alertify.js (visit the Alertify.js page for documentation and information) for Modal pop-ups, and a custom implementation of jQuery Notific8 (visit jQuery Notific8 page for documentation and information) to create Toast notifications.
This article will also show you how to create a fullscreen modal pop-up with custom content, natively out of the box on your Igloo site.
Tip: Consider combining these code examples with User-based activities to create custom alerts, notifications, and content that will appear only to selected Users or Groups.
This will create an alert-style pop-up in the middle of the screen.
// Create a modal pop-up
Utils.modalAlert('This is a notification!');
There are three types of Toast notifications that can be instantiated anywhere on the Igloo platform.
This will create a toast notification of type “Info”.
(Fig. 3.1) Toast style info pop-up.
// Create a toast notification of an informational nature
Utils.toastAlert({
message: 'This is important information regarding content on the page',
header: 'Important Information',
type: "info"
});
Option | Value |
---|---|
message | The body of the toast notification |
header | The title of the toast notification |
type | Sets the type of toast notification to display |
This will create a toast notification of type “Success”.
(Fig. 3.2) Toast style success pop-up.
// Create a toast notification to indicate a successful action
Utils.toastAlert({
message: 'The action was successful',
header: 'Success',
type: "info"
});
Option | Value |
---|---|
message | The body of the toast notification |
header | The title of the toast notification |
type | Sets the type of toast notification to display |
This will create a toast notification of type “Error”.
(Fig. 3.3) Toast style error pop-up.
// Create a toast notification to indicate an error
Utils.toastAlert({
message: 'There was an error with the performed action',
header: 'Error',
type: "error"
});
Option | Value |
---|---|
message | The body of the toast notification |
header | The title of the toast notification |
type | Sets the type of toast notification to display |
Here’s a jQuery example of a fullscreen modal:
window.addEvent('domready', function () {
$('modal_click').addEvent('click', function () {
var modal = new Modalbox({
'ismodal': true,
'width': '400px',
'height': '325px',
'title': 'Modal',
'closetext': 'Close',
'adoptclone': $('modal_box')
});
});
});