You can set the options for your jBoxes right away or as a second argument when you are using a plugin:

var options = {
  title: 'My title',
  content: 'My content'
new jBox(options);
new jBox('Tooltip', options);

jBox comes with the default plugins Tooltip, Mouse and Modal.

In addition you can include the plugins Confirm, Notice and Image.


id string Choose a unique id, otherwise jBox will set one for you (jBox1, jBox2, ...)


auto, integer The width and height of the content area
integer Minimal width and height of content area
integer Maximal width and height of content area
boolean Adjusts width and height to fit the viewport
integer Don't adjust width or height below this value (in pixel)

Attaching jBox

attach jQuery selector A jQuery selector to elements that will open and close your jBox, e.g. '.tooltip'
trigger click,
Defines with which event the jBox opens or closes when interacting with the attached element
preventDefault boolean Prevent the default event when opening jBox, e.g. don't follow the href in a link


content string,
jQuery element
Sets the content of your jBox. You can use jQuery elements to append elements (set CSS style display to none so the elements won't show up on your page)
getContent string Get the content from an attribute when jBox opens, e.g. 'data-content'. Use 'html' to get the attached elements HTML as content
title string Adds a title to your jBox
getTitle string Get the title from an attribute when jBox opens, e.g. 'data-title'
footer string Adds a footer to your jBox
isolateScroll boolean Isolates scrolling to the content container


ajax: {
  url: null,
  data: ''
  // ...
When you set an URL, jBox makes an AJAX request when it opens. You can add any jQuery ajax option, e.g. beforeSend, complete, success, etc.
↳ url string The URL to send the AJAX request to
↳ data string, object Data to send with your AJAX request, e.g. {id: 82, limit: 10}
↳ reload boolean, strict Resend the AJAX request when jBox opens. Use true to send the AJAX request call only once for every element or 'strict' to resend every time jBox opens
↳ getURL string The attribute in the source element where the AJAX request will look for the URL, e.g. 'data-url'
↳ getData string The attribute in the source element where the AJAX request will look for the data, e.g. 'data-ajax'
↳ setContent boolean Automatically set the response as new content when the AJAX request is finished
↳ loadingClass boolean, string Add a class to the wrapper when jBox is loading. Set to the desired class name or to true to use the default class name 'jBox-loading'
↳ spinner boolean, string Hides the current content and adds a spinner while loading. You can pass HTML content to add your own spinner, e.g. spinner: '<div class="mySpinner"></div>'
↳ spinnerDelay integer Milliseconds to wait until spinner appears
↳ spinnerReposition boolean Repositions jBox when the spinner is added or removed
cancelAjaxOnClose boolean Cancels the ajax call when jBox closes and it hasn't finished loading yet


target jQuery selector The jQuery selector to the target element where jBox will be opened. If no element is found, jBox will use the attached element as target
position object Set an object with the horizontal position x and the vertical position y, e.g. {x: 'right', y: 'center'}. You can also set numbers for an absolute position
outside x, y, xy Moves your jBox outside of the target element
offset integer, object Offset to final position. You can set different values for x and y with an object, e.g. {x: 15, y: -10}
attributes object Defines which CSS attributes should be used, e.g. {x: 'right', y: 'bottom'}. Note that right and bottom can only be used when your position values are integer, e.g. {x: 300, y: 20}
fixed boolean Your jBox will stay on position when scrolling
adjustPosition flip, move,
Adjusts your jBoxes position if there is not enough space. The value 'flip' positions the jBox on the opposite outside position, the value 'move' works only with a pointer. Set to true to use both. This option overrides the reposition options
adjustTracker boolean By default jBox adjusts its position when it opens or when the window size changes, set to true to also adjust when scrolling
adjustDistance integer, object The minimal distance to the viewport edge while adjusting. Use an object to set different values, e.g. {top: 50, right: 5, bottom: 20, left: 5}
reposition boolean Calculates new position when the window-size changes
repositionOnOpen boolean Calculates new position each time jBox opens (rather than only when it opens the first time)
repositionOnContent boolean Calculates new position when the content changes with .setContent() or .setTitle()
holdPosition boolean Keeps current position if space permits. Applies only to 'Modal' type.


pointer boolean,
left, right,
top, bottom,
Your pointer will always point towards the target element, so the option outside needs to be 'x' or 'y'. By default the pointer is centered, set a position to move it to any side. You can also add an offset, e.g. 'left:30' or 'center:-20'
pointTo target,
left, right,
top, bottom
Setting something else than 'target' will add a pointer even if there is no target element set or found


fade integer Fade duration in ms, set 0 or false to disable
animation object, boolean,
zoomIn, zoomOut,
pulse, move,
slide, flip,
Animation when jBox opens or closes.
To use different animations for opening and closing, use an object: {open: 'tada', close: 'flip'}. You can also set the direction of the move and slide animations: {open: 'move:right', close: 'slide:top'}


theme string Set a jBox theme class, e.g. 'TooltipDark'
addClass string Adds classes to the wrapper
overlay boolean Adds an overlay to hide page content when jBox opens (adjust color and opacity with CSS)
overlayClass string Add a class name to the overlay
zIndex integer, auto Use a high z-index, or set to 'auto' to move the jBox to the very top when it opens


delayOpen integer Delay opening in ms. Note that the delay will be ignored if your jBox didn't finish closing
delayClose integer Delay closing in ms. Nnote that there is always a closing delay of at least 10ms to ensure jBox won't be closed when opening right away

Closing jBox

closeOnEsc boolean Close jBox when pressing [esc] key
closeOnClick boolean, body,
box, overlay
Close jBox with a mouseclick: true closes when you click anywhere, 'overlay' when clicking on the overlay, 'box' when clicking on the jBox itself and 'body' when you click anywhere but the jBox
closeOnMouseleave boolean Close jBox when the mouse leaves the jBox area or the area of the attached element
closeButton boolean, overlay,
title, box
Adds a close button to your jBox. The value true will add the button to the overlay, title or the jBox itself, in that order if any of those elements can be found

Other options

appendTo jQuery element The element your jBox will be appended to. Any other element than $('body') is only useful for fixed positions or when position values are numbers
createOnInit boolean Creates jBox and makes it available in DOM when it's being initialized, otherwise it will be created when it opens for the first time
blockScroll boolean Blocks scrolling when jBox is open
blockScrollAdjust boolean, string, array Adjust page elements to avoid content jumps when scrolling is blocked. See more here:​/StephanWagner/​unscroll
draggable boolean, title,
jQuery selector
Makes your jBox draggable. Use title or provide the selector of any child element of jBox to use as the handle. When using true you can not interact with elements like textfields in the content area
dragOver boolean When you have multiple draggable jBoxes, the one you select will always move over the other ones
autoClose integer, boolean Time in ms when jBox will close automatically after it was opened


preloadAudio boolean, array Preloads the audio files set in option audio. You can also preload other audio files, e.g. ['src_to_file.mp3', 'src_to_file.ogg']
audio string, object The URL to an audio file to play when jBox opens. Set the URL without file extension, jBox will look for an .mp3 and .ogg file. To play audio when jBox closes, use an object, e.g. {open: 'src_to_audio1', close: 'src_to_audio2'}
volume integer, object The volume of the audio in percent. To have different volumes for opening and closeing, use an object, e.g. {open: 75, close: 100}


onInit function Fired when jBox is initialized. Note that you can use this in the event functions, it refers to your jBox object, e.g. onInit: function() {; }
onAttach function Fired when jBox attached itself to elements
onPosition function Fired when jBox is positioned
onCreated function Fired when jBox is created and is availible in DOM
onOpen function Fired when jBox opens
onOpenComplete function Fired when jBox is completely open (when fading finished)
onClose function Fired when jBox closes
onCloseComplete function Fired when jBox is completely closed (when fading finished)
onDragStart function Fired when dragging starts
onDragEnd function Fired when dragging finished

Additional options for plugin Confirm

confirmButton string Text for the submit button
cancelButton string Text for the cancel button
confirm function Function to execute when clicking the submit button. By default jBox will use the onclick or href attribute in that order if found
cancel function Function to execute when clicking the cancel button
closeOnConfirm boolean Close jBox when the user clicks the confirm button

Additional options for plugin Image

src string The attribute to get the image source from, e.g. 'href' for a link: <a href="/path/image.jpg">
gallery string The attribute to set the galleries, e.g. 'data-jbox-gallery'. When changing this option, make sure you check the option attach, as jBox Image gets attached to [data-jbox-gallery] by default.
imageLabel string The attribute where jBox gets the image label from, e.g. 'title'
imageFade integer The fade duration for images in ms
imageSize cover, contain,
auto, string
How to display the images. Use CSS styles of background-position, e.g. 'cover', '50% auto'
imageCounter boolean Set to true to add an image counter, e.g. 4/20
imageCounterSeparator string HTML to separate the current image number from all image numbers, e.g. '/' or ' of '
downloadButton boolean Adds a download button
downloadButtonText string Text for the download button
downloadButtonUrl string The attribute at the source element where to find the image to download, e.g. data-download="/path/image.jpg". If none provided, the currently active image will be downloaded
mobileImageAttr string The attribute to look for an mobile version of the image
mobileImageBreakpoint integer The upper breakpoint to load the mobile image
preloadFirstImage boolean Preload the first image when page is loaded

Additional options for plugin Notice

color black, red, green,
blue, yellow
Add a color to your notices
stack boolean Set to false to disable notice-stacking
stackSpacing integer Spacing between notices when they stack
delayOnHover boolean When hovering the notice it won't close
showCountdown boolean Adds a progress bar showing the time it will take until the notice closes