Current staff

Modal window (lightbox)

  1. Home
  2. Information and services
  3. Information technology
  4. Web and intranet sites
  5. Updating Drupal 7 websites

A modal window, or lightbox, is a container that displays additional content over the top of a page.

On UQ Standard, a lightbox expands as a central overlay that dims the parent page behind it.

Users can then view content such as videos or images in the centre of the overlay without having to leave the page.

Use a lightbox when you want to:

  • display content without crowding a page
  • keep a user on a particular page.

Don't use a lightbox to display:

  • forms
  • large amounts of content
  • content that may expand again when a user interacts with it.

How to create a lightbox

Submit an IT request to have lightboxes enabled on your site.

Once enabled, lightboxes can be created and edited by:

  • editors
  • site coordinators.

Using a lightbox for images

To add a lightbox to an image on your page, go to your WYSIWYG editor and:

  1. Select the content (text or image) that will expand as a lightbox.
  2. Click the link icon.
  3. From the window, select 'URL' from the 'Link type' drop-down menu.
  4. Click the 'Browse server' button, then double click the full-size image you want to link to.
  5. Go to the 'Advanced' tab and type colorbox into the 'Stylesheet Classes' box.
  6. Select 'OK' and then 'Save' to publish the page.

Using a lightbox for videos

To add a lightbox to a video on your page, go to your WYSIWYG editor and:

  1. Select the content (text or image) that will expand as a lightbox.
  2. Click the link icon.
  3. From the window, select 'URL' from the 'Link type' drop-down menu.
  4. In the 'URL' field, enter the video's embed URL (this is under 'Share' on YouTube or Vimeo).
  5. Add ?width=960&height=540&iframe=true to the end of the URL. You can change the width and height values.
  6. Go to the 'Advanced' tab and type colorbox-load into the 'Stylesheet Classes' box.
  7. Select 'OK' and then 'Save' to publish the page.
Top of page

Best practice

  • Use lightboxes when you need to keep a user on the parent page.
  • Test your lightbox on different screen sizes to make sure the content displays as expected on mobile.
  • Only use a modal if the content can't be included on the page itself.
Top of page