Creating UI elements
Introduction
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 for Modal pop-ups, and a custom implementation of jQuery Notific8 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.
Modal
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!');
Toast Notifications
There are three types of Toast notifications that can be instantiated anywhere on the Igloo platform.
Info
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 |
Success
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 |
Error
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 |
Fullscreen modal with custom content
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')
});
});
});
- 181 views
- 2 versions
- 0 comments
- 1 follower
- Updated By:
- Matthew Seabrook
- September 19, 2017
- Posted By:
- Matthew Seabrook
- September 19, 2017
- Versions:
- v.2
0 Comments