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 (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.

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”.

// 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"
});

Success

This will create a toast notification of type “Success”.

// Create a toast notification to indicate a successful action
Utils.toastAlert({
    message: 'The action was successful',
    header: 'Success',
    type: "info"
});

Error

This will create a toast notification of type “Error”.

// Create a toast notification to indicate an error
Utils.toastAlert({
    message: 'There was an error with the performed action',
    header: 'Error',
    type: "error"
});

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')
        });
    });
});