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.

This is the modal header

This is the modal content

Close

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="https://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.