fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

jBox
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://stephanwagner.me/jBox
GitHub:https://github.com/StephanWagner/jBox
网站描述:模态框、提示、通知的 jQuery 插件

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://fly63.com/nav/2860

more>>
相关栏目
jQuery之家
致力于搜集和整理各种jQuery插件,jQuery特效...
官网
fullPage.js
jQuery全屏滚动插件
官网GitHub
Waterfall.js
瀑布流无限加载插件
官网GitHub
Raty
一个非常棒的jQuery 评分插件
官网GitHub
Bootstrap-waterfall
一款基于Bootstrap仿Pinterest网站的网格瀑布流插件
官网GitHub
Jcrop
一个功能强大的 jQuery 图像裁剪插件
官网GitHub
jcarousel
jQuery轮播图插件
官网GitHub
Parallax.js
一款jQuery滚动视觉差插件
官网GitHub
vegas
一个jQuery / Zepto幻灯片插件
官网GitHub
paroller.js
一款轻量级的页面滚动视觉差特效jquery插件
官网GitHub
lazyload.js
jquery图片懒加载插件
官网GitHub
alertify.js
jQuery酷炫的各种消息提示插件
官网GitHub
pickadate.js
一个轻量级的 jQuery 日期选择插件
官网GitHub
chosen.js
基于jquery的下拉选择框美化插件
官网GitHub
threesixty.js
360度产品图片预览jQuery插件
官网GitHub
textillate.js
实现动感的 CSS3 文本动画的简单插件
官网GitHub

手机预览