yBox 12.6.1

A lightweight, flexible, and modern lightbox library.

Installation & Files

Include the CSS and JS files in your project:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yuvalAshkenaz/yBox/dist/css/ybox.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/yuvalAshkenaz/yBox/dist/js/ybox.min.js?lang=he"></script>

Helper Classes

.yBox_iframe

Opens the href link inside an iframe container.

.yBox_ajax

Fetches content via AJAX from the href attribute.

.yBox_share

Opens a built-in social media sharing modal.

JavaScript API Parameters

code

Inject raw HTML directly.
yBox({ code: '<div>Hello</div>' });

url

Open a specific URL in an iframe.
yBox({ url: 'https://example.com' });

self

Pass a DOM element (usually the clicked element) to inherit its attributes.


							<a href="#popup" class="yBox my-link">The link</a>

							<script> yBox({ self: document.querySelector('.my-link') }); </script>

yBoxClass

Add a custom class to the main wrapper .yBoxOverlay.
yBox({ yBoxClass: 'custom-theme' });

focus

CSS selector of an element to focus on after opening.
yBox({ focus: '.input-field' });

Select an element from the DOM (even if hidden) and show it.
yBox({ id: '#my-hidden-div' });

HTML Attributes

data-ybox-class

Adds a custom class to the popup window.
Use "no-bg" to remove the default white background.

data-ybox-alt

Sets the alt attribute for the opened image.

data-ybox-title

Sets the title attribute for iframe or image.

data-ybox-headline

Adds an <h2> headline above the content.

data-ybox-group

Groups multiple links into a gallery (next/prev buttons).

data-ybox-img

Sets a custom thumbnail for galleries or a poster image for videos.

Targeting Elements (href)

Use the href attribute on your button to target specific hidden elements on the page.

ID Target

href="#my-popup"
Opens the element with the exact ID. If the ID is not found, yBox automatically falls back to searching for a class named .my-popup.

Class Target

href=".my-popup"
Opens an element by its class. Perfect for dynamic content loops (like product cards or blog posts).

First, yBox looks for the class inside the clicked button.
If not found, it opens the element that matches the index of the clicked button.

URL Parameters

You can trigger yBox automatically on page load by adding parameters to the URL query string.

?ybox-id=element-id

Automatically opens a specific element when the page loads.

URL Example:
https://yourdomain.com/page?ybox-id=my-popup

Required HTML structure:

<div style="display:none;">
	<div id="my-popup">
		Content opens automatically!
	</div>
</div>

JavaScript Execution Examples

Open on page load

<script>
yBox({
    code: '<div class="p-5">Welcome to yBox!</div>'
});
</script>

Call specific hidden element

yBox({ id: '#popup' });

Event Callbacks

Hook into the lifecycle of the modal.

beforeYboxOpen

function beforeYboxOpen(self){ ... }

afterYboxOpen

function afterYboxOpen(self){ ... }

beforeYboxClose

function beforeYboxClose(self){ ... }

afterYboxClose

function afterYboxClose(self){ ... }

Nested yBox (Modal inside Modal)

Media Embeds

YouTube / Vimeo (Iframe)

Self-Hosted Video (MP4)

Custom Styling & AJAX

Gallery Groups

Add data-ybox-group="groupname" to create a gallery.