Ads

Thursday, 10 July 2014

jBox : jQuery Plugin for Modal Windows, Tooltips & Notices

Download   Demo


jBox is a powerful and flexible jQuery plugin, taking care of all your modal windows, tooltips, notices and more.


Tooltips


You can use jQuery selectors to add tooltips to elements:


$('.tooltip').jBox('Tooltip');

Now elements with class=”tooltip” 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>

Notices


A notice will open automatically and destroy itself after some time:


new jBox('Notice', 
content: 'Hurray! A notice!'
);

Images


To create image modal 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>



jBox : jQuery Plugin for Modal Windows, Tooltips & Notices

No comments:

Post a Comment