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 Mikit. 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="mi-modal-box mi-hide">
    <div class="mi-modal">
        <span class="mi-close mi-icon-close"></span>
        <div class="mi-modal-header">Modal Header</div>
        <div class="mi-modal-body">...</div>
    </div>
</div>

打开链接

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

// Markup
<div id="ui-modal" class="modal-box mi-hide">
    <div class="mi-modal">
        <span class="mi-close mi-icon-close"></span>
        <div class="mi-modal-header">UI Modal</div>
        <div class="mi-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="mi-modal-box mi-hide">
    <div class="mi-modal">
        <span class="mi-close mi-icon-close"></span>
        <div class="mi-modal-header">Modal Header</div>
        <div class="mi-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');