This plug-in adds a clickable close box to the specified element. The display is driven by a .closebox style that must be set in order for the close button to render.

This plug-in works by inserting an absolutely positioned element into the the specified component or provided handle. The element in question is hidden when the close button is clicked.

Options

The options parameter can be a map of any of these properties (default values are shown):

var opt = { handle: null,
   closeHandler: null,
   cssClass: "closebox"
};

handle
An optional handle into which the close box is drawn.

Forces the selected elements to document absolute level. Use this option if the element doesn't center correctly which can happen if its position is relative already. When set the element is removed from its current hierarchy and moved to a child of body.

closeHandler
A function that is called when the close button is clicked. The handler is called just before the window is closed and returning false will not close the window. The handler passes the this pointer as the closable component and you can do $(this).hide() to manually close it.

cssClass
The CSS class that is responsible for rendering the closebox. Note that the default is closebox and if it doesn't exist you won't see a close icon since the style determines the default rendering.

Default Styling

The default style that the component looks for to style the closebox looks like this:

.closebox
{
   position: absolute;       
   right: 2px;
   top: 2px;
   background-image: url(images/close.gif);
   background-repeat: no-repeat;
   width: 14px;
   height: 14px;
   cursor: pointer;       
} 
.closebox:hover 
{
   background-color: white;
}

Class Members

Requirements

See also:

Class modalDialog