jBox是一个强大和灵活的jQuery插件，用于创建你所有的模态窗口，提示，通知或更多。
基本
有两种简单的方法创建jBox，你可以使用jQuery选择器或者创建一个jBox实例。下面是两个功能一样的实例：
$('.tooltip').jBox('Tooltip');
new jBox('Tooltip', {attach: $('.tooltip')});
先设置一个可选类型（即通知类型），你也可以通过 new jBox(options)设置你的选项。已保存的类型解决了每一次你自己去定义的麻烦。参照选项部分看看你都能够设置哪些类型。
你可以使用这些类型：Tooltip, Mouse, Modal, Confirm, Notice, Image.
要在变量中保存你的实例，你可以使用jBox方法：
var myModal = new jBox('Modal', {
content: 'This is my jBox'
});
myModal.open();
记得把你的JavaScript 代码放到 $(document).ready(function() {});里面哦。
jBox添加元素
使用jQuery选择器或者使用attach方法添加你的元素到jBox。在以下的例子中，当你点击带有id="myModal"的元素时，jBox将会打开或者关闭。
new jBox('Modal', {
attach: $('#myModal'),
title: 'Hurray!',
content: 'This is my modal window'
});
<div id="myModal">Click me to open a modal window!</div>
当你把鼠标放到元素上时提示工具会打开，当你点击元素时模态窗口会打开。这个动作是在trigger选项中定义的，你可以把它设置为 click 或 mouseenter。
下面的代码，当你点击元素时提示工具会打开，而不是鼠标放上去时。
$('.tooltip').jBox('Tooltip', {
trigger: 'click'
});
<span class="tooltip" title="Tooltip 1">Click me!</span>
<span class="tooltip" title="Tooltip 2">Click me!</span>
打开和关闭
如果你想进一步的控制jBox，使用 open(), close() 或者 toggle()方法。
var myModal = new jBox('Modal');
<span onclick="myModal.open();">Open jBox!</span>
<span onclick="myModal.close();">Close jBox!</span>
<span onclick="myModal.toggle();">Toggle jBox!</span>
你可以使用 delayOpen 和 delayClose 选项延迟打开和关闭：
$('.tooltip').jBox('Tooltip', {
delayOpen: 500,
delayClose: 1000
});
想要强制立即打开或者关闭，对open 或者 close 方法使用ignoreDelay选项即可：
myTooltip.close({ignoreDelay: true});
内容
给jBox增加内容的最简单方法就是使用 title 和 content 选项。要使内容独立于附加元素，使用 getTitle 和 getContent选项。
$('.tooltip').jBox('Tooltip', {
getTitle: 'data-jbox-title',
getContent: 'data-jbox-content'
});
<span class="tooltip" data-jbox-title="jBox title 1" data-jbox-content="jBox content 1">Hover me!</span>
<span class="tooltip" data-jbox-title="jBox title 2" data-jbox-content="jBox content 2">Hover me!</span>
如果你有很多内容，可以创建一个元素让jBox抓取。
$('#myModal').jBox('Modal', {
title: 'Grab an element',
content: $('#grabMe')
});
<div style="display: none" id="grabMe">I'm your content. Remember to set CSS display to none!</div>
要让设置的内容显示，使用setTitle 和 setContent 方法：
var myModal = $('#myModal').jBox('Modal');
myModal.setTitle('Hello!').setContent('Some content...');
如果设置了一个标题或内容导致jBox尺寸改变，jBox将会复位。为了避免这种情况，用true作为第二选项：.setContent(content, true)。
jBox也能够很容易地使用AJAX加载内容：
$('#myModal').jBox('Modal', {
ajax: {
url: '/example.php',
data: 'id=1',
reload: true
}
});
如果你设置 reload 为 true，那么jBox每次打开都会重新载入内容。
位置
使用target, position 和 outside 选项，你可以把jBox放到任何元素的任何位置。
$('.tooltip').jBox('Tooltip', {
target: $('#anotherElement'),
position: {
x: 'left',
y: 'top'
},
outside: 'x'
});
你的 target 可以是任何元素，包括 $(window)。
position选项是一个包含x水平对齐和y垂直对齐的对象。
使用x, y 或者 xy，配合outside选项你可以移动你的jBox到你目标元素的外面。
当jBox被打开或者你设置了内容，jBox将会计算它的位置。当窗口大小改变，如果你想重新让jBox计算位置，使用reposition选项。
当jBox在可视窗口区域外面时，如果你想让你的jBox调整它的位置，使用adjustPosition 和 adjustTracker 选项：
$('.tooltip').jBox('Tooltip', {
adjustPosition: true,
adjustTracker: true
});
当你滚动浏览器或者重置窗口大小时，adjustTracker 选项能够确保位置自适应。注意，当你的jBox在外部位置时，位置只能得到调整。
指针
pointer选项给你的jBox增加一个指针。注意你的jBox要有一个外部位置。
你也可以定义你的指针放置到哪或者偏移距离：
$('.tooltip1').jBox('Tooltip', {pointer: 'left'});
$('.tooltip2').jBox('Tooltip', {pointer: 'center:-100'});
$('.tooltip3').jBox('Tooltip', {pointer: 'right:60'});
动画
你可以通过fade选项设置渐变动画的持续时间。
jBox也有一些自己的CSS动画：zoomIn, zoomOut, pulse, move, slide, flip, tada.
$('#myModal').jBox('Modal', {animation: 'zoomIn'});
为正在打开和正在关闭使用不同的动画，使用一个对象：{open: 'tada', close: 'flip'}
你也可以使用move 和 slide 动画设置方向：{open: 'move:right',close: 'slide:top'}
渐变动画支持跨浏览器，为了动画效果你需要一个现代浏览器，或者是IE10以上版本。
事件
你可以使用以下事件： onInit, onCreated, onOpen, onClose, onCloseComplete。
注意，在事件功能中你可以使用 this 关键字，它指向你的jBox对象：
$('#myModal').jBox('Modal', {
onOpen: function() {
this.setContent('jBox is opening…');
},
onClose: function() {
this.setContent('jBox is closing…');
}
});
- 官方文档(英文):https://stephanwagner.me/jBox/documentation
- 源码下载:https://github.com/StephanWagner/jBox/releases
- 转载自:http://www.ldstars.com/js/210.html
- 功能演示:https://stephanwagner.me/jBox