
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.
For implementing Thickbox in our project, the required steps are,
After that, we need to add HTML elements with appropriate attribute name and value to trigger ThickBox display.
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>
Note:
If no dimension is provided for the ThickBox, then it will be 630px X 440px by default.
Download jQuery ThickBox Source Code