Modal Samples - InkJS

Open the modal on page load

<div id="displayOnStart" class="ink-modal fade" data-width="800px" data-height="400px">
    <div class="modal-header">
        <button class="modal-close ink-dismiss"></button>
        <h5>This Modal is dislayed as soon as the page is fully available</h5>
    </div>
    <div class="modal-body" id="modalContent">
        <h3>Please confirm your previous choice</h3>
        <p>"No," said Peleg, "and he hasn't been baptized right either, or it would have washed some of that devil's blue off his face."</p>
        <p>
            <img src="http://placehold.it/800x400" style="width: 100%;" alt="">
        </p>
        <p>"Do tell, now," cried Bildad, "is this Philistine a regular member of Deacon Deuteronomy's meeting? I never saw him going there, and I pass it every Lord's day."</p>
        <p>"I don't know anything about Deacon Deuteronomy or his meeting," said I; "all I know is, that Queequeg here is a born member of the First Congregational Church. He is a deacon himself, Queequeg is."</p>
    </div>
    <div class="modal-footer">
        <div class="push-right">
            <button class="ink-button info">Confirm</button>
            <button class="ink-button caution ink-dismiss">Cancel</button>
        </div>
    </div>
</div>
<script>
    Ink.requireModules(['Ink.UI.Modal_1'],function(Modal){
        var myFirstModal = new Modal('#displayOnStart');
    });
</script>

Click in the button to open a different modal

<div class="ink-shade fade">
    <div id="displayOnBtnClick" class="ink-modal fade" data-trigger="#myTrigger" data-width="800px" data-height="400px">
        <div class="modal-header">
            <button class="modal-close ink-dismiss"></button>
            <h5>This is a different modal</h5>
        </div>
        <div class="modal-body" id="modalContent">
            Different!!! Opened by a button
        </div>
    </div>
</div>

<script>
    Ink.requireModules(['Ink.UI.Modal_1'],function(Modal){
        var mySecondModal = new Modal('#displayOnBtnClick');
    });
</script>

Click in the button to open a different modal through code

<script>
    Ink.requireModules(['Ink.Dom.Event_1','Ink.UI.Modal_1'],function(Event,Modal){
        Event.observe( Ink.s('#codeTrigger'), 'click', function( event ){
            Event.stop(event);
            var myThirdModal = new Modal(null,{
                width: '600px',
                height: '400px',
                markup: '<div class="modal-header"><button class="modal-close ink-dismiss"></button></div><div class="modal-body">Stuff</div>'
            });
        });
    });
</script>

Create a Modal for opening later

<div class="ink-shade fade">
    <div id="displayLater" class="ink-modal fade" data-trigger="#myTrigger" data-width="800px" data-height="400px">
        <div class="modal-header">
            <button class="modal-close ink-dismiss"></button>
            <h5>Created after constructing the <code>Modal</code> object</h5>
        </div>
        <div class="modal-body" id="modalContent">
            <p>Opened using the <code>open()</code> method. To do this, add the <code>autoDisplay:false</code> option.</p>
        </div>
    </div>
</div>

<button id="openDisplayLaterModal">Open Modal</button>

<script>
    Ink.requireModules(['Ink.Dom.Event_1','Ink.UI.Modal_1'],function(Event,Modal){
        var openLater = new Modal('#displayLater', { autoDisplay: false });
        Event.observe( Ink.s('#openDisplayLaterModal'), 'click', function ( event ) {
            openLater.open();
        });
    });
</script>