【jQuery】カスタマイズ可能なツールチップ、モーダルウィンドウ、画像ギャラリーなどを作成jBox

jBoxは簡単にカスタマイズ可能なツールチップ、モーダルウィンドウ、画像ギャラリーなどを作成できるjQueryプラグイン。

Tooltips

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

class=”tooltip”

<span class="tooltip" title="My first tooltip">Hover me!</span>
<span class="tooltip" title="My second tooltip">Hover me!</span>

Modal windows

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

new jBox('Confirm', {
confirmButton: 'Do it!',
cancelButton: 'Nope'
});
<div onclick="alert('You did it!')" data-confirm="Do you really want to do this?">Click me!</div>
<a href="http://stephanwagner.me" data-confirm="Do you really want to leave this page?">Click me!</a>

Notices

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

Images

new jBox('Image');
<a href="/image-large.jpg" data-jbox-image="gallery1" title="My image"><img src="/image.jpg" alt=""></a>
 
jbox

【jQuery】カスタマイズ可能なツールチップ、モーダルウィンドウ、画像ギャラリーなどを作成jBox

  • LATEST
  • RELATED
  • POPULAR