Modal Windows
Modal windows
Modal windows are in-page popup windows that allow you to show content to visitors without them leaving the page. They can be used for hidden in-page content, videos, images, image galleries, or external webpage content.
The key to creating a modal window is adding the class 'venobox' to your link. Additionally, you must add 'data-type="xxx"', where xxx is iframe,inline,youtube or vimeo. Images and image galleries don't require a data-type. Galleries do require a 'data-gall="galleryName"' to cluster the images together.
The full modal window documentation.
Required JavaScript
JS Plugin: Venobox in pagelet slot 1
JS Initialization: Venobox in a bottom pagelet slot -- 15 in most templates
In-page content
Open hidden in-page content in a modal window.<a class="button bluebg radius venobox" data-type="inline" href="#inpage">Open hidden in-page content in a modal window.</a>
<div id="inpage" class="hide">
<div class="whitebg caption fullheight">
<h3>In-page Content</h3>
<p>Hi, I was on the page all along.</p>
</div>
</div>
Videos
Open a YouTube video in a modal window.<a class="button bluebg radius venobox" data-type="youtube" href="http://youtu.be/NS_hDg-j3JA">Open a YouTube video in a modal window.</a>
Open a Vimeo video in a modal window.
<a class="button bluebg radius venobox" data-type="vimeo" href="http://vimeo.com/28089545">Open a Vimeo video in a modal window.</a>
External content
This is a regular panel.
It has an easy to override visual style, and is appropriately subdued.
<div class="panel radius">
<h5>This is a regular panel.</h5>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
<p><a class="venobox" data-type="iframe" href="https://www.tru.ca">Open www.tru.ca in a modal window.</a></p>
</div>
Images and Image Galleries
<ul class="large-block-grid-4 medium-block-grid-4 small-block-grid-2">
<li><a href="http://placeimg.com/800/600/animals" class="venobox" data-gall="myGallery"><img src="http://placeimg.com/800/600/animals" alt="image"></a></li>
<li><a href="http://placeimg.com/800/600/nature" class="venobox" data-gall="myGallery"><img src="http://placeimg.com/800/600/nature" alt="nature"></a></li>
<li><a href="http://placeimg.com/800/600/people" class="venobox" data-gall="myGallery"><img src="http://placeimg.com/800/600/people" alt="image"></a></li>
<li><a href="http://placeimg.com/800/600/arch" class="venobox" data-gall="myGallery"><img src="http://placeimg.com/800/600/arch" alt="image"></a></li>
<li><a href="http://placeimg.com/500/800/tech" class="venobox" data-gall="myGallery"><img src="http://placeimg.com/500/800/tech" alt="image"></a></li>
<li><a href="http://placeimg.com/500/800/animals" class="venobox" data-gall="myGallery"><img src="http://placeimg.com/500/800/animals" alt="image"></a></li>
<li><a href="http://placeimg.com/500/800/nature" class="venobox" data-gall="myGallery"><img src="http://placeimg.com/500/800/nature" alt="image"></a></li>
<li><a href="http://placeimg.com/500/800/people" class="venobox" data-gall="myGallery"><img src="http://placeimg.com/500/800/people" alt="image"></a></li>
</ul>