University of Minnesota Extension
/
612-624-1222
Menu Menu

Extension > Template documentation > Web style guide > Modal windows

Modal windows

We use FancyBox for our modal windows.

Setup

The script automatically detects when a thumbnail image links to a larger image. There is no setup needed on your part other than linking to an image.

HTML

<a href="img/image.jpg" title="add a short caption or leave blank">
<img src="img/image.jpg" alt="" class="left" /></a>

Demo

Setup for videos in YouTube

Download play icon

Add the transparent PNG play icon to your image that launches your video. You will do this within Adobe Photoshop. Right click on the icon and select Save Image As...

  • Assign the link a class of noIcon and video.

  • Grab the link to the video from the URL field at the top of the browser. Do not use the URL from the Share button.

  • If the URL has a & symbol you need to remove the & and everything after it. For example, this URL:

    http://www.youtube.com/watch?v=KaLyj6e7qIY&feature=youtu.be

    Should be made to look like:

    http://www.youtube.com/watch?v=KaLyj6e7qIY

    Here is another URL that won't work:

    • http://youtu.be/KaLyj6e7qIY

HTML

<a href="http://www.youtube.com/watch?v=KaLyj6e7qIY" class="noIcon video">
<img src="/extreme-weather/img/kmit.jpg" alt="KIMT video" class="left" /></a>

Demo

KIMT video

Setup for videos in Media Mill

Having Media Mill videos use the modal window takes a bit more effort.

HTML

<p><a href="#video-a" class="mm-video-link"><img src="" alt="" /></a></p>
<div id="video-a" class="mm-video">
	...embed code from Media Mill...
</div>
<!--/mm-video-->

Replace the ...embed code from Media Mill... snippet from above with the embed code found in Media Mill for your video.

Demo

Setup

Link

Assign the link that pops up the modal window a class of inline-modal-link. The href should link to the id of the modal window content.

<ul>
	<li><a href="#data-a" class="inline-modal-link">Pop up "data-a" content</a></li>
	<li><a href="#data-b" class="inline-modal-link">Pop up "data-b" content</a></li>
</ul>

Modal window content

This content is hidden by default with JavaScript. If someone has JavaScript turned off they will still be able to see the hidden modal content.

Assign the modal window content div a class of inline-modal-content. Then, assign the id the same as the href of the modal link (without the # symbol).

<div id="data-a" class="inline-modal-content">
	<p>This modal window content has the id=data-a applied to it.</p>
</div>
<div id="data-b" class="inline-modal-content">
	<p>This modal window content has the id=data-b applied to it.</p>
</div>

Demo

This modal window content has the id=data-a applied to it. This is a link

This modal window content has the id=data-b applied to it.


  • © 2013 Regents of the University of Minnesota. All rights reserved.
  • The University of Minnesota is an equal opportunity educator and employer. Privacy