jBox

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

网站描述:模态框、提示、通知的 jQuery 插件

jBox

官方网站：https://stephanwagner.me/jBox

小编说

以上是编程之家为你收集整理的jBox全部内容。

如果觉得编程之家网站内容还不错，欢迎将编程之家推荐给好友。