How does it works

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(HTML or DOM node) is the only mandatory parameter.

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 inserts and removes the elements from the document everytime the box is open and closed( I didn't see any performance issues by inserting and removing the dom element(as far as I could check).

Default properties

Default CSS coniguration

Background

position: fixed;
z-index: 8;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgb(0, 0, 0);
opacity: 0.75;

Popup box

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

//no fade
$("a#my-link").click(function () {
$.floatbox({
        content: "<p>My HTML content here!</p>"
    });
});

//using fade
$("a#my-link").click(function () {
$.floatbox({
        content: "<p>My HTML content here!</p>",
        fade: true
    });
});

//using ajax with callback
$("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
        },
        fade: true
    });
});