There will be some times when you will want to highlight a piece of information without making visitors load a completely separate webpage. The "lightbox" effect is now frequently used across the web as a way of doing this. When you click on a link where this effect is applied, the webpage is grayed out and a small window with the required content floats on top of the page. Users are prevented from clicking elsewhere on the page until the window is closed. This window is referred to as a modal box.

To demonstrate the use of modal boxes (along with the other examples in this chapter), we will create a component separate from "Restaurant Reviews". Go to the components folder of your Joomla! installation and create a folder named com_js. Within this folder, create a file named js.php with the following code:

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport('joomla.application.component.controller');
class JsController extends JController
{
function modalBox()
...