<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>
<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>
<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>
<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>
"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."
"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."
"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."
Modal
objectOpened using the open()
method. To do this, add the autoDisplay:false
option.