Stephan Wagner

Options

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
id string Choose a unique id, otherwise jBox will set one for you (jBox1, jBox2, ...).

Dimensions
width
height		 auto, integer The width and height of the content area.
minWidth
minHeight		 integer Minimal width and height of content area.
maxWidth
maxHeight		 integer Maximal width and height of content area.
responsiveWidth
responsiveHeight		 boolean Adjusts width and height to fit the viewport.
responsiveMinWidth
responsiveMinHeight		 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,
mouseenter,
touchclick		 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
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
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.

Position
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,
boolean		 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
pointer boolean,
left, right,
top, bottom,
center		 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.

Animations
fade integer Fade duration in ms, set 0 or false to disable.
animation object, boolean,
zoomIn, zoomOut,
pulse, move,
slide, flip,
tada		 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'}.

Appearance
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.

Delays
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: https://github.com​/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.

Audio
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}.

Events
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() { this.open(); }.
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.

Methods

Check out the methods page to explore all available functions and how to use them.

Share Your Thoughts

I’d love to hear your thoughts, questions, or feedback!
Email is optional and kept private. See my Privacy Policy.