yBox是一个动画化、易于使用、功能丰富的jQuery模式弹出插件，适用于任何网络内容，如文本、iframe、图像、画廊等。

更多功能：

• 无需任何JS调用即可简单实现。
• 支持Youtube、Vimeo和HTML5视频。
• AJAX内容也受支持。
• 允许您从当前模态中打开另一个模态。
• 允许您使用键盘在图像之间导航。

如何使用它:

1.要使用此模式弹出插件，请下载以下文件并将其插入您的HTML页面。

<!-- 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.将CSS类“yBox”添加到触发器元素，并指定要在模式弹出窗口中显示的内容的选择器。

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

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

3.就是这样。您还可以使用y框方法

yBox('WelCome!');

4.获取并在模式弹出窗口中显示一个iframe（如Youtube视频）。

<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.将一个额外的CSS类应用到模式弹出窗口。

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

6.通过AJAX请求获取并显示模式弹出窗口的外部页面。

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

7.同时支持HTML5视频。

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

8.使用数据ybox组属性：

<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.当您在url中有参数“systemmessage”时，显示弹出窗口：

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

10.打开之前/之后的触发功能。

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');
  }
};

更新日志：

2022-09-06

• 使现代化

2022-08-31

• 使现代化

2022-08-19

• 添加了yBox关闭之前和之后的函数

2022-08-17

• JS和CSS更新

2022-05-25

• 添加了vimeo支持

2022-03-03

• 更新JS

2022-03-03

• 添加了before/after函数。

2021-12-01

• JS已更新

2021-11-19

• JS已更新

2021-11-18

• 在Ajax yBox中打开yBox

2021-10-11

• JS更新

2021-10-10

• 当url中有参数“systemmessage”时，显示弹出的yBox

2021-07-25

• 模糊弹出窗口时关闭弹出窗口

2021-06-25

• 更改了youtube嵌入的语言

2021-06-22

• 更改的函数名称

2021-06-15

• JS和CSS更新

2021-06-08

• 关注打开yBox上的iframe

预览截图

高级模式弹出插件 jQuery yBox