<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>
<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>
<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>
<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>
<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>