jQuery Floatbox
This plugin creates by default a floating div in the center of the page using half of the user window size for its width(height is not limited), uses a black background div as well(with opacity), the content of the floating box is the only mandatory parameter, but all others parameter can be passed as well(such as the background and floating box css configuration), the floating box is fixed in the middle of the screen. A link with a class named "close-box" is added in the floating box, this link is responsable for closing(hiding) the floating box.
It supports simple ajax request(post and get) that inserts html content into the floatbox when using the ajax parameter in options.
Options properties:
bg: the background HTML id, default is "floatbox-background"
box: the floating box HTML id, default is "floatbox-box"
content: The floating box HTML content, no default value(mandatory)
fade: enables or disables fade effect in showing or hiding the floating box, default is false
bgConfig: css configuration in object format for background div
Default CSS for bgConfig:
position: fixed;
z-index: 8;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(0, 0, 0);
opacity: 0.75;
boxConfig: css configuration in object format for floating box div
Default CSS for boxConfig:
position: fixed;
z-index: 9;
width: half of window size;
margin-left: negative half of width value;
height: auto;
top: 50%;
left: 50%;
background-color: #fff;
margin-top: negative half value of the element height;
Usage:
Simplest way to use:
$("a#my-link").click(function () {
$.floatbox({
content: "<p>My HTML content here!</p>"
});
});Enables fade feature when showing and hiding the floating box:
$("a#my-link").click(function () {
$.floatbox({
content: "<p>My HTML content here!</p>",
fade: true
});
});To use directly an ajax request, set the properties for ajax object in options, if params is set it does a POST request otherwise it uses GET. Example bellow using POST - the finish function is a optional callback function which is executed after the request has been completed processed.
$("a#my-link").click(function () {
$.floatbox({
ajax: {
url: "my_request.pl", // request url
params: "name=ieda&age=23", //post parameters
before: "<p>Loading content</p>", //loading message while the request is being processed
finish: function () {
//callback function
}
},
fade: true
});
});Releases
| Official releases | Date | Size | Links | Status | |
|---|---|---|---|---|---|
| 1.0.7 | 2009-Feb-05 | 3.54 KB | Recommended for 1.0.x |  | |
| 1.0.6 | 2009-Feb-04 | 3.53 KB | Recommended for 1.2.x | | |