jQuery ThickBox

jQuery ThickBox is a kind of popup dialog overlay on top of the browser window. This is an UI widget written in JavaScript by Cody Lindley using jQuery library. ThickBox can be displayed based on events like onClick, onMouseDown, etc.

popup_card

jQuery Thickbox Features

  • While showing ThickBox, it disables background screen and prevents user to interact with the web page until ThickBox overlay is closed.
  • This popup overlay widget will stay positioned in the viewport even if the web page is scrolled.
  • ThickBox can have an image gallery, external HTML, iFrame, AJAX response as its content.
  • It can load dynamic data on the fly.

Implementing ThickBox

For implementing Thickbox in our project, the required steps are,

  1. Download jQuery Library and ThickBox files (thickbox.js, loadingAnimation.gif image and thickbox.css).
  2. Open ThickBox Javascript file and specify loader image path.
  3. Import jQuery Library and ThickBox files inside <HEAD> portion.

After that, we need to add HTML elements with appropriate attribute name and value to trigger ThickBox display.

Example for Showing ThickBox with Enlarged Image

In this example, we are using <a> element to trigger ThickBox. In this anchor element, we should add class attribute having the thick box as its value (class=”checkbox”). In the anchors, href we have given a larger image ad, it will be shown as content in the overlay popup. HTML code will be,

<html>
<head>
<title>jQuery ThickBox</title>
<script language="javascript" src='jquery/jquery.min.js' type='text/javascript'></script>
<script language="javascript" src="thickbox/thickbox.js" type="text/javascript"></script>
<link href='thickbox/thickbox.css' rel='stylesheet' type='text/css' />
</head>
<body>
<a href="images/popup.jpg" title="ThickBox Popup" class="thickbox"><img src="images/popup_thumb.jpg" alt="popup_thump"/></a>
</body>
</html>

Output

jquery_thickbox_output

Note:

If no dimension is provided for the ThickBox, then it will be 630px X 440px by default.

Download jQuery ThickBox Source Code

This jQuery code tutorial was published on November 27, 2013.

↑ Back to Top