All samples are using Ink.requireModules, please read how to use it at Ink.requireModules section

Ink.UI.Modal class

Methods
Method name Description
new Modal(selector, [options]) Constructor
.destroy() Removes the modal from the DOM
.dismiss() Closes the modal.
.getContentElement() Returns the content DOM element
.getModalElement() Returns the modal element
.getShadeElement() Returns the modal shade (the page-covering dark shade element)
.isOpen() Returns whether the modal is currently open.
.open([event]) Opens this Modal.
.setContentMarkup(contentMarkup) Replaces the content markup

new Ink.UI.Modal(selector, [options])

Accepts

  • selector

    Element or ID
  • options

    Options object, containing:
  • options.width

    Default/Initial width. Ex: '600px'
  • options.height

    Default/Initial height. Ex: '400px'
  • options.shadeClass

    Custom class to be added to the div.ink-shade
  • options.modalClass

    Custom class to be added to the div.ink-modal
  • options.trigger

    CSS Selector for target elements that will trigger the Modal.
  • options.autoDisplay

    Displays the Modal automatically when constructed.
  • options.markup

    Markup to be placed in the Modal when created
  • options.onShow

    Callback function to run when the Modal is opened.
  • options.onDismiss

    Callback function to run when the Modal is closed. Return `false` to cancel dismissing the Modal.
  • options.closeOnClick

    Flag to close the modal when clicking outside of it.
  • options.closeOnEscape

    Determines if the Modal should close when "Esc" key is pressed. Defaults to true.
  • options.responsive

    Determines if the Modal should behave responsively (adapt to smaller viewports).
  • options.triggerEvent

    (advanced) Trigger's event to be listened. Defaults to 'click'.

Basic usage

To view a basic modal window, click the the example modal button. Then check the example code below to know how it's generated.

Open example modal

Code

<div class="ink-shade fade">
    <div id="myModal" class="ink-modal fade" data-trigger="#myModalTrigger" data-width="80%" data-height="80%" role="dialog" aria-hidden="true" aria-labelled-by="modal-title">
        <div class="modal-header">
            <button class="modal-close ink-dismiss"></button>
            <h2 id="modal-title">This is the modal header</h2>
        </div>
        <div class="modal-body" id="modalContent">
            <h3>This is the modal content</h3>
            <figure class="ink-image">
                <img src="http://lorempixel.com/1200/675/sports/1" alt="" class="ink-image">
            </figure>
        </div>
        <div class="modal-footer">
            <div class="push-right">
                <!-- Anything with the ink-dismiss class will close the modal -->
                <button class="ink-button caution ink-dismiss">Close</button>
            </div>
        </div>
    </div>
</div>
<a href="#" id="myModalTrigger" class="ink-button">Open example modal</a>
<script>
    // Not required if you are using autoload.js.
    Ink.requireModules( ['Ink.Dom.Selector_1','Ink.UI.Modal_1'], function( Selector, Modal ){
        var modalElement = Ink.s('#myModal');
        var modalObj = new Modal( modalElement );
    });
</script>

.destroy() method

Removes the modal from the DOM

.dismiss() method

Closes the modal.

.getContentElement() method

Returns the content DOM element

.getModalElement() method

Returns the modal element

.getShadeElement() method

Returns the modal shade (the page-covering dark shade element)

.isOpen() method

Returns whether the modal is currently open.

.open([event]) method

Opens this Modal.
Use this if you created the modal with autoDisplay: false
to open the modal when you want to.

Accepts

  • event

    (internal) In case its fired by the internal trigger.

.setContentMarkup(contentMarkup) method

Replaces the content markup

Accepts

  • contentMarkup

    Markup to be placed inside the modal.