jBox是一款功能强大的jquery弹出层插件。jBox插件可以用来创建tooltips提示框、模态窗口、图片画廊等多种效果。
使用方法
在页面中引入jBox.all.min.css、jquery和jBox.all.min.js文件。
<link href="dist/jBox.all.min.css" rel="stylesheet"> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/jBox.all.min.js"></script>
创建Tooltips
HTML结构如下。
<span class="tooltip" title="My tooltip">Hover me!</span> <span class="tooltip" title="Another tooltip">Hover me!</span>
初始化插件:
new jBox('Tooltip', { attach: '.tooltip' });
创建模态窗口
HTML结构如下。
<div id="myModal">Click me to open a modal window!</div>
初始化插件:
new jBox('Modal', { width: 300, height: 100, attach: '#myModal', title: 'My Modal Window', content: 'Hello there!' });
创建确认窗口
HTML结构如下。
<div onclick="doit()" data-confirm="Do you really want to do this?">Click me!</div> <a href="#" data-confirm="Do you really want to leave this page?">Click me!</a>
初始化插件:
new jBox('Confirm', { confirmButton: 'Do it!', cancelButton: 'Nope' });
创建消息通知
初始化插件:
new jBox('Notice', { content: 'Hurray! A notice!', color: 'blue' });
该jquery弹出层插件的官方网址为:https://stephanwagner.me/jBox/get_started