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

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