Advanced Modal Popup Plugin - jQuery yBox

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

More Features:

• Simple to implement without any JS call.
• Supports Youtube, Vimeo, and HTML5 videos.
• AJAX content is supported as well.
• Allows you to open another modal from within the current one.
• Allows you to navigate between images with keyboard.

How to use it:

1. To use this modal popup plugin, download and insert the following files into your HTML 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 trigger element and specify the selector of the content to be displayed in the modal popup.

<a href="#content" class="yBox">Trigger Link</a>

<div style="display:none;">
  <div id="content">
    Any Modal Content Here
  </div>
</div>

3. That's it. You can also display a modal popup on page load using the yBox method.

yBox('WelCome!');

4. Fetch and display an iframe (like a Youtube video) in the modal popup.

<a href="https://www.youtube.com/watch?v=eEMpCcLm6NI&list=RDeEMpCcLm6NI&start_radio=1" class="yBox yBox_iframe" rel="nofollow" title="Click Here">
  <img src="https://img.youtube.com/vi/eEMpCcLm6NI/0.jpg"  />
</a>

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

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

6. Fetch and display an external page to the modal popup via AJAX requests.

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

7. HTML5 video is supported as well.

<a href="/path/to/video.mp4" class="yBox yBox_video">
  ...
</a>

8. Create a gallery lightbox by grouping your images using the data-ybox-group attribute:

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

9. Show the popup when you have the parameter "systemmessage" in the url:

https://www.jqueryscript.net/?systemmessage=jQuery Script

10. Trigger functions before/after open.

function beforeYboxOpen(self){
  if(self.hasClass('alertBeforeYbox')){
    alert('Before yBox open');
  }
};

function yBoxIsOpen(self){
  if(self.hasClass('alertAfterYbox')){
    alert('After yBox open');
  }
};

function beforeYboxClose(self){
  if(self.hasClass('alertBeforeClose')){
    let confirmAction = confirm("Are you sure you want to close yBox?");
        if (!confirmAction) {
      return false;
    }
  }
};

function afterYboxClose(self){
  if ( self.hasClass('alertAfterClose') ) {
    alert('After yBox close');
  }
};

Changelog:

2022-09-06

• update

2022-08-31

• update

2022-08-19

• added functions for before and after yBox close

2022-08-17

• JS & CSS update

2022-05-25

• Added vimeo support

2022-03-03

• Update JS

2022-03-03

• Added before/after functions.

2021-12-01

• JS updated

2021-11-19

• JS updated

2021-11-18

• Open yBox inside Ajax yBox

2021-10-11

• JS update

2021-10-10

• Show the popup yBox when have parameter "systemmessage" in url

2021-07-25

• Close popup when blur the popup

2021-06-25

• changed language for youtube embed

2021-06-22

• Changed function names

2021-06-15

• JS & CSS update

2021-06-08

• focus on iframe on open yBox

---

This awesome jQuery plugin is developed by yuval123123. For more Advanced Usages, please check the demo page or visit the official website.