Still using Internet Explorer?

You'll have a happier experience on the TRU website — and most other sites — if you update to a modern web browser such as Firefox, Chrome, or Edge. You can continue to use Internet Explorer for certain tasks, such as using Banner.

Thompson Rivers University 50th Anniversary
Thompson Rivers University 50th Anniversary

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.

In-page Content

Hi, I was on the page all along.

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

Open www.tru.ca in a modal window.

<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="http://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>
Search To Top