Examples:

Click these links to see how it works:

#1. 300 x 250px A small notice box.

#2. 400 x 500px Another box.

#3. 400 x Auto NO height defined. Should use auto height.

#4. Manual This link have no fx-box class. Check script.js to check how to open box manually.

#5. JS Content This link also have no fx-box class. Check script.js to add content dynamically (maybe ajax).

How to Use:

  1. Load JS and CSS
  2. Create a link using .fx-box class and this attributes:
    • data-title : box title.
    • data-target : target element ID (with "#") to use in box content. This element should be exist. preffered in footer area, ans should be hidden using display none style attr.
    • data-width : box width. Optional, default to 300px.
    • data-height : box height. Optional, default to auto.
  3. Create a hidden element with ID the same as data-id attr above.