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:
- Load JS and CSS
- 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.
- Create a hidden element with ID the same as
data-id
attr above.