jQuery Plugin Easy-To-Use Modal Popup | yBox

yBox is an animated, easy-to-use, feature-rich plugin and a jQuery modal popup for any web content such as text, iframes, images, galleries, and much more.

More advantages:

  • Easy to implement without any JS call.
  • Supports YouTube videos.
  • AJAX content is also supported.
  • It allows you to open another mod from within the current one.
  • It allows you to move between pictures using the keyboard.

Pure Responsive CSS Overlay Modal Popup Plugin

How to make use of it:

1. To use this modal popup plugin, download and insert the next information into your HTML web page.

<!-- jQuery (required) -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- yBox Stylesheet -->
<link rel="stylesheet" href="/path/to/dist/css/yBox.min.css" />
<!-- yBox Directives (optional) -->
<script src="/path/to/dist/js/directive.min.js"></script>
<!-- yBox JavaScript -->
<script src="/path/to/dist/js/yBox.min.js"></script>

2. Add the CSS class ‘yBox’ to the set-off component and specify the selector of the content to be displayed within the modal popup.

<a href="#content" class="yBox">Trigger Link</a>
<div style="display:none;">
  <div id="content">
    Any Modal Content Here

3. You may also show a modal popup on web page load utilizing the yBox technique.


4. Fetch and show an iframe (like a Youtube video) within the modal popup.

<a href=" " class="yBox yBox_iframe" rel="nofollow" title="Click Here">
  <img src=" "  />

5. Apply an extra CSS class to the modal popup.

<a href="#content" data-ybox-class="myYboxClass" class="yBox">
  Trigger Link

6. Fetch and show an exterior web page to the modal popup by way of AJAX requests.

<a href="https://www.google.com" class="yBox yBox_ajax">Click Me</a>

7. Create a gallery lightbox by grouping your photographs utilizing the data-ybox-group attribute:

<a href="1.jpg" class="yBox" data-ybox-group="group1">
  <img src="1.jpg" alt="" width="200" />
<a href="2.jpg" class="yBox" data-ybox-group="group1">
  <img src="2.jpg" alt="" width="200" />
<a href="3.jpg" class="yBox" data-ybox-group="group1">
  <img src="3.jpg" alt="" width="200" />

Advanced Modal Popup Plugin, yBox jQuery Github

See Demo And Download

Official Website(yuval123123): Click Here

This superior jQuery/javascript plugin is developed by yuval123123. For extra Advanced Usages, please go to the official website.

Related Posts


[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-based icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[fontawesome.com], etc. Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons How…


Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server. Must Read: HTML 5…


A Lightweight jQuery Plugin for Animating Split-Flap Displays | fallblatt

fallblatt is a lightweight jQuery plugin for animating split screens. This jQuery plugin allows you to include such offers in your web application. Everything from virtual departure…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…


jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization. Features Periodic count with the specified period…


Dynamic, Data-driven Periodic Table built with Vue.js

Periodicity is a dynamic, data-driven periodic table created with Vue.js that uses D3 animations and graphs to show the beauty of periodic trends. Built With vue.js (component…