<div class="ink-shade fade">
    <div id="displayOnStart" class="ink-modal fade" data-width="80%" data-height="60%" role="dialog" aria-hidden="true" aria-labelled-by="modal-title">
        <div class="modal-header">
            <button class="modal-close ink-dismiss"></button>
            <h5 id="modal-title">This Modal is dislayed as soon as the page is fully available</h5>
        </div>
        <div class="modal-body">
            <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 blue">Confirm</button>
                <button class="ink-button red ink-dismiss">Cancel</button>
            </div>
        </div>
    </div>
</div>
 
<script type="text/javascript">
    // Unnecessary with autoload.js
    Ink.requireModules(['Ink.UI.Modal_1'],function(Modal){
        var myFirstModal = new Modal('#displayOnStart');
    });
</script>

Open Modal

<div class="ink-shade fade">
    <div id="displayOnBtnClick" class="ink-modal fade" data-trigger="#myTrigger" data-width="800px" data-height="400px" role="dialog" aria-hidden="true" aria-labelled-by="modal-title">
        <div class="modal-header">
            <button class="modal-close ink-dismiss"></button>
            <h5 id="modal-title">This is a different modal</h5>
        </div>
        <div class="modal-body">
            Different!!! Opened by a button and filled dynamically!
        </div>
    </div>
</div>
<script type="text/javascript">
    Ink.requireModules(['Ink.UI.Modal_1'], function(Modal){
        var mySecondModal = new Modal('#displayOnBtnClick');
    });
</script>

Open Modal

<script type="text/javascript">
    Ink.requireModules(['Ink.Dom.Event_1','Ink.UI.Modal_1'],function(InkEvent,Modal){
        var mySecondModal = new Modal('#displayOnBtnClick');
 
        InkEvent.observe( Ink.s('#codeTrigger'), 'click', function( event ){
            InkEvent.stopDefault(event);
 
            var myThirdModal = new Modal(null,{
                width: '600px',
                height: '400px',
                shadeClass: 'myShadeClass myOtherShadeClass',
                modalClass: 'myModalClass myOtherModalClass',
                markup: '<div class="modal-header"><button class="modal-close ink-dismiss"></button></div><div class="modal-body">Stuff</div>'
            });
        });
    });
</script>

Open Modal

<div class="ink-shade fade">
    <div id="displayLater" class="ink-modal fade" data-width="800px" data-height="400px" role="dialog" aria-hidden="true" aria-labelled-by="modal-title">
        <div class="modal-header">
            <button class="modal-close ink-dismiss"></button>
            <h5 id="modal-title">Created after constructing the <code>Modal</code> object</h5>
        </div>
        <div class="modal-body">
            <p>Opened using the <code>open()</code> method. Add the <code>autoDisplay:false</code> option to avoid opening when the page loads.</p>
        </div>
    </div>
</div>
<script type="text/javascript">
    Ink.requireModules(['Ink.UI.Modal_1', 'Ink.Dom.Event_1'], function (Modal, InkEvent) {
        var openLater = new Modal('#displayLater', { autoDisplay: false });
 
        InkEvent.observe( Ink.s('#openDisplayLaterModal'), 'click', function ( event ) {
            // Opening the modal when we damn well please
            setTimeout(function () {
                openLater.open();
            }, 1000);
        });
    });
</script>

Stuff you can put in your modal

<div class="ink-shade fade">
    <div id="modalWithStuff" class="ink-modal fade" data-width="80%" data-height="80%" data-trigger="#openModalWithStuffs" role="dialog" aria-hidden="true" aria-labelled-by="modal-title">
        <div class="modal-header">
            <button class="modal-close ink-dismiss"></button>
            <h5 id="modal-title>This Modal is dislayed as soon as the page is fully available</h5>
        </div>
        <div class="modal-body">
            <h1>A tooltip</h1>
 
            <span class="ink-tooltip" data-tip-text="A tooltip!!!!1">A tooltip!</span>
 
            <hr>
 
            <h1>A video</h1>
            <iframe src="http://rd3.videos.sapo.pt/playhtml?file=http://rd3.videos.sapo.pt/hhl0qEyhOad0aNrZYGvQ/mov/1&quality=sd" frameborder="0" scrolling="no" width="640" height="360"></iframe>
            <hr>
 
            <h1>A datepicker</h1>
 
            <input class="ink-datepicker" type="text">
 
            <hr>
        </div>
        <div class="modal-footer">
            <div class="push-right">
                <button class="ink-button blue">Confirm</button>
                <button class="ink-button red ink-dismiss">Cancel</button>
            </div>
        </div>
    </div>
</div>
 
<button id="openModalWithStuffs">Open Modal</button>
 
<script>
    Ink.requireModules(['Ink.UI.Modal_1'], function (Modal) {
        new Modal('#modalWithStuff');
    });
</script>