jBox功能强大的模态窗口工具提示和消息效果jQuery插件

Question

jBox 是一个强大而灵活的 jQuery 插件，可以帮助实现模态窗口，工具提示，通知和更多的功能。你可以使用 jQuery 选择器轻松地添加工具提示效果到元素上，您可以以同样的方式设置模态窗口。

使用方法

本文章将为你提供一些基本的使用方法，你也可以访问官方网站查看更详细的使用方法。

引入文件

使用之前需要引入相关的文件，Piece of cake: Include jQuery 2.1 or 1.11, jBox.min.js and jBox.css. Ready to rock & roll!

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jboxcdn.com/0.3.2/jBox.min.js"></script>
<link href="http://code.jboxcdn.com/0.3.2/jBox.css" rel="stylesheet">

你也可以使用 CDN（code.jboxcdn.com）加速的框架文件。

工具提示

你可以使用jQuery选择器添加工具提示元素：

$('.tooltip').jBox('Tooltip');

在用class=“tooltip”的元素将打开工具提示：

<span class="tooltip" title="My first tooltip">Hover me!</span>
<span class="tooltip" title="My second tooltip">Hover me!</span>

模态窗口

你可以设置为相同的模态窗口提示。但大多数时候你会想要更多的方法，如一个标题或HTML内容：

new jBox('Modal', {
    width: 300,
    height: 200,
    attach: $('#myModal'),
    title: 'My Modal Window',
    content: '<i>Hello there!</i>'
});
<div id="myModal">Click me to open a modal window!</div>

注意事项

通知后将自动打开,并在一段时间后自我消失：

new jBox('Notice', {
    content: 'Hurray! A notice!'
});

幻灯片放大

Easily attach jBox to images:

new jBox('Image');

<a href="/image1_large.jpg" title="My title 1" data-jbox-image="gallery1"><img src="/image1_small.jpg" alt=""></a>
<a href="/image2_large.jpg" title="My title 2" data-jbox-image="gallery1"><img src="/image2_small.jpg" alt=""></a>
<a href="/image3_large.jpg" title="My title 3" data-jbox-image="gallery1"><img src="/image3_small.jpg" alt=""></a>

了解更多

这三个例子都是很基本的。该jBox库非常强大，提供了一个广阔的多种选择来定制外观和行为。了解更多的文档中：http://stephanwagner.me/jBox/documentation 查看

• Demo: http://stephanwagner.me/jBox
• Docs: http://stephanwagner.me/jBox/documentation