Modal

Modal windows are used for various reasons and purposes. Kube makes the way you design and operate modal windows very straightforward. First, you set a div which will represent the content of the modal window, then you set up a way to open and close this window, and finally you add a way to call the modal from the page.

Calling

Here you add an actual call to the modal window. Clicking the “Open” button below will launch a modal with content of a #my-modal div. You can use buttons or links to open modals in Kube. Clicking anywhere outside of the modal or hitting ESC will close the window.

// Call
<button data-component=“modal” data-target=”#my-modal”>Open</button>



// Markup
<div id=“my-modal” class=“modal-box hide”>
    <div class=“modal”>
        <span class=“close”></span>
        <div class=“modal-header”>Modal Header</div>
        <div class=“modal-body”>…</div>
    </div>
</div>

Open from url

// Call
<button data-component=“modal” data-target=”#ui-modal” data-url=“modal.html”>Open</button>



// Markup
<div id=“ui-modal” class=“modal-box hide”>
    <div class=“modal”>
        <span class=“close”></span>
        <div class=“modal-header”>UI Modal</div>
        <div class=“modal-body”>… content from modal.html …</div>
    </div>
</div>



// modal.html
<p>…</p>
<a href=”#” data-action=“modal-close”>Close</a>

Direct open

// Call
<button onclick=”$.modalwindow({ target: ‘#ui-modal’, url: ‘modal.html’ });”>Open</button>

Actions

Using modal-close action you now introducing a way to close you window, using a link or a button.

<div id=“my-modal” class=“modal-box hide”>
    <div class=“modal”>
        <span class=“close”></span>
        <div class=“modal-header”>Modal Header</div>
        <div class=“modal-body”>
            …
            <a href=”#” data-action=“modal-close”>Close</a>
        </div>
    </div>
</div>

Settings

target
  • Type: string
  • Default: null

Defines a content layer for the modal window

url
  • Type: string
  • Default: false

Defines a URL in case your modal is opening via a URL.

header
  • Type: string
  • Default: false

Sets the header for the modal window. Optional, and is false by default.

width
  • Type: string
  • Default: ‘600px’
height
  • Type: string
  • Default: false
maxHeight
  • Type: string
  • Default: false

This setting defines the maximum height of the window. A scrollbar will be introduced in case there’s more text than maxHeight can accommodate.

position
  • Type: string
  • Default: ‘center’

This is where your modal appears when opened.

overlay
  • Type: boolean
  • Default: true

When this is set to false, you modal window will just appear on top ow your page, without an overlay effect. By default, your page will be “covered” with a semi-transparent layer when you open a modal.

animation
  • Type: boolean
  • Default: true

Turns opening and closing animation on and off.

Callbacks

open
$(’#my-modal’).on(‘open.modal’, function()
{
    // do something…
});
opened
$(’#my-modal’).on(‘opened.modal’, function()
{
    // do something…
});
close
$(’#my-modal’).on(‘close.modal’, function()
{
    // do something…
});
closed
$(’#my-modal’).on(‘closed.modal’, function()
{
    // do something…
});

API

You can use these API methods to programmatically operate and modify modal windows.

close
$(’#my-modal’).modal(‘close’);
setHeader
$(’#my-modal’).modal(‘setHeader’, ‘My Header’);

This is another way to set a header for the modal on the fly without introducing a div with a modal-header class.

setContent
$(’#my-modal’).modal(‘setContent’, ‘My Content’);

Content of the modal window can be set up on the fly as well. No need for a div with modal class.

setWidth
$(’#my-modal’).modal(‘setWidth’, ‘800px’);