Modal

Modal windows are used for various reasons and purposes. Kube makes the way you design and operate modals as the service for your modules.

Demo #

The modal can have two options for loading content. The first one is when the content is loaded from the specified element on the page.

// HTML target element
<div id="mymodal" class="is-hidden">...</div>

// JS module
(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.modal = app.modal;
        },
        showModal: function()
        {
            this.modal.open({
                target: '#mymodal',
                title: 'My Modal'
            });
        }
    });
})(Kube);

The second way is when the content is loaded from HTML file on the server-side.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.modal = app.modal;
        },
        onmessage: {
            modal: {
                save: function(sender, $modal, $form)
                {
                    this.modal.close();
                }
            }
        },
        showModal: function()
        {
            this.modal.open({
                url: '/server-side/my-modal.html',
                title: 'My Modal',
                commands: {
                    save: { title: 'Save' },
                    cancel: {
                        title: 'Cancel',
                        classname: 'is-tertiary',
                        close: true
                    }
                }
            });
        }
    });
})(Kube);

Opening by clicking on the button #

This example shows how to open a modal window by clicking on a button.

// Button
<button class="button" data-type="show">Show Modal</button>

// Modal
<div id="mymodal" class="is-hidden">...</div>

// Module
(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.modal = app.modal;
        },
        onclick: function(e, element, type)
        {
            if (type === 'show')
            {
                this.showModal();
            }
        },
        showModal: function()
        {
            this.modal.open({
                target: '#mymodal',
                title: 'My Modal'
            });
        }
    });
})(Kube);

Settings #

target

Type: String Boolean

Default: false

This settings allows you to load the modal body from element on the page. Set the ID selector of element as the target of modal.

// HTML target element
<div id="mymodal" class="is-hidden">...</div>

// JS module
(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.modal = app.modal;
        },
        showModal: function()
        {
            this.modal.open({
                target: '#mymodal',
                title: 'Modal From Target'
            });
        }
    });
})(Kube);

url

Type: String Boolean

Default: false

This settings allows you to load the modal body from HTML file on the server-side.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.modal = app.modal;
        },
        showModal: function()
        {
            this.modal.open({
                url: '/server-side/my-modal.html',
                title: 'My Modal'
            });
        }
    });
})(Kube);

title

Type: String Boolean

Default: false

The setting sets the title of modal.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.modal = app.modal;
        },
        showModal: function()
        {
            this.modal.open({
                url: '/server-side/my-modal.html',
                title: 'My Modal'
            });
        }
    });
})(Kube);

width

Type: String

Default: '600px'

The setting sets the width of modal. You can specify the width in pixels or percent.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.modal = app.modal;
        },
        showModal: function()
        {
            this.modal.open({
                url: '/server-side/my-modal.html',
                title: 'My Modal',
                width: '50%'
            });
        }
    });
})(Kube);

height

Type: String Boolean

Default: false

The setting sets the height of modal. You can specify the width in pixels or percent. If the height will be less than the content height, the modal body will have scrolling.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.modal = app.modal;
        },
        showModal: function()
        {
            this.modal.open({
                url: '/server-side/my-modal.html',
                title: 'My Modal',
                height: '400px'
            });
        }
    });
})(Kube);

handle

Type: String Boolean

Default: false

If this option is enabled, firstly it allows you to close the modal window when you press Enter, if the focus is in the input field of the form. Second, it sets the event that should occur when the window is closed if Enter was pressed.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.modal = app.modal;
        },
        onmessage: {
            modal: {
                save: function(sender, $modal, $form)
                {
                    console.log('Enter is pressed and modal closed');
                }
            }
        },
        showModal: function()
        {
            this.modal.open({
                url: '/server-side/my-modal.html',
                title: 'My Modal',
                handle: 'save'
            });
        }
    });
})(Kube);

commands

Type: Object Boolean

Default: false

This setting allows you to create buttons in the modal footer, manage them and set events when you press the buttons.

Each command is an object with the following data:

  • title - set the name of the button, required
  • classname - set the class of the button (is-secondary, is-tertiary), optional
  • close - indicates that clicking on this button will close the modal, optional

The key of the command will be the name of the generated event when the button is pressed.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.modal = app.modal;
        },
        onmessage: {
            modal: {
                save: function(sender, $modal, $form)
                {
                    this.modal.close();
                    console.log('Save!');
                },
                closed: function(sender, $modal, $form)
                {
                    console.log('Cancel!');
                }
            }
        },
        showModal: function()
        {
            this.modal.open({
                url: '/server-side/my-modal.html',
                title: 'My Modal',
                commands: {
                    save: { title: 'Save' },
                    cancel: {
                        title: 'Cancel',
                        classname: 'is-tertiary',
                        close: true
                    }
                }
            });
        }
    });
})(Kube);

name

Type: String Boolean

Default: false

This setting allows to catch the modal events by the specified name.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.modal = app.modal;
        },
        onmessage: {
            modal: {
                opened: function(sender, $modal, $form)
                {
                    if (sender._id === 'mymodal')
                    {
                        console.log('Modal is opened');
                    }
                }
            }
        },
        showModal: function()
        {
            this.modal.open({
                name: 'mymodal',
                url: '/server-side/my-modal.html',
                title: 'My Modal'
            });
        }
    });
})(Kube);

Events #

Event Description
open This event fires immediately when the open instance method is called.
opened This event is fired when the modal has been opened, will wait for CSS animation to complete.
close This event fires immediately when the close instance method is called.
closed This event is fired when the modal has been closed, will wait for CSS animation to complete.

Catch events in your module.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.modal = app.modal;
        },
        onmessage: {
            modal: {
                opened: function(sender, $modal, $form)
                {
                    console.log('Modal is opened');
                }
            }
        },
        showModal: function()
        {
            this.modal.open({
                url: '/server-side/my-modal.html',
                title: 'My Modal'
            });
        }
    });
})(Kube);

Catch the modal events by the specified name.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.modal = app.modal;
        },
        onmessage: {
            modal: {
                opened: function(sender, $modal, $form)
                {
                    if (sender._id === 'mymodal')
                    {
                        console.log('Modal is opened');
                    }
                }
            }
        },
        showModal: function()
        {
            this.modal.open({
                name: 'mymodal',
                url: '/server-side/my-modal.html',
                title: 'My Modal'
            });
        }
    });
})(Kube);

Methods #

open

Arguments
params Object settings of the modal

Open the modal window.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.modal = app.modal;
        },
        showModal: function()
        {
            this.modal.open({
                url: '/server-side/my-modal.html',
                title: 'My Modal'
            });
        }
    });
})(Kube);

close

Close the modal window.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.modal = app.modal;
        },
        showModal: function()
        {
            this.modal.open({
                url: '/server-side/my-modal.html',
                title: 'My Modal'
            });
        },
        hideModal: function()
        {
            this.modal.close();
        }
    });
})(Kube);