jBox 介绍
jBox 是一个强大和灵活的 jQuery 插件，可用于所有的模态框、提示、通知以及更多场景.
Tooltips
Create a new instance of jBox Tooltip and attach it to elements:
new jBox('Tooltip',{
attach: '.tooltip'
});
Now elements with will open tooltips:
<span class="tooltip" title="My first tooltip">Hover me!</span>
<span class="tooltip" title="My second tooltip">Hover me!</span>
Modal windows
You can set up modal windows the same way as tooltips. But most of times you'd want more variety,like a title or html content: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>Confirm windows
Confirm windows are modal windows which requires the user to confirm a click action on an element. Give an element the attribute data-confirm to attach it:
new jBox('Confirm',{
confirmButton: 'Do it!',
cancelButton: 'nope'
});
<div onclick="alert('Yay! You did it!')" data-confirm="Do you really want to do this?">Click me!</div>
<a href="https://stephanwagner.me/jBox" data-confirm="Do you really want to leave this page?">Click me!</a>
Notices
A notice will open automatically and destroy itself after some time:
new jBox('Notice',{
content: 'Hurray! A notice!'
});
Images
To create image windows you only need following few lines:
new jBox('Image');
<a href="/image-large.jpg" data-jBox-image="gallery1" title="My image"><img src="/image.jpg" alt=""></a>
网站地址:https://stephanwagner.me/jBox
GitHub:https://github.com/StephanWagner/jBox
jBox
官方网站：https://stephanwagner.me/jBox
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。