jBox - Modal windows, tooltips, notices and more

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

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: stephanwagner.me

1. INCLUDE CSS AND JS FILES

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="jBox/Source/jBox.min.js"></script>
<link href="jBox/Source/jBox.css" rel="stylesheet">

2. HTML AND JAVASCRIPT

Tooltips

Html

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

Javascript

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

Modal windows

Html

<div id="myModal">Click me to open a modal window!</div>

Javascript

new jBox('Modal', {
    width: 300,
    height: 200,
    attach: $('#myModal'),
    title: 'My Modal Window',
    content: '<i>Hello there!</i>'
});

Notices

Html

<div  id="myNotice">Click me to show a notice!</div>

Javascript

$('#myNotice').click(function() {
		new jBox('Notice', {
			position: {
				y: 65,
				x: 15
			},
			content: 'Hurray! A notice!'
		});
});

4. OPTIONS

You can set the options for your jBoxes right away or as a second argument when you are using a type:

var options = {
    title: 'My title',
    content: 'My content'
};
new jBox(options);
new jBox('Tooltip', options);

There are following types: Tooltip, Mouse, Modal, Notice.

5. METHODS

The best way to use methods on your jBoxes is to save your jBox in a variable:

var myModal = new jBox('Modal');
 
myModal.setTitle('My Title');
myModal.setContent('My Content');
myModal.open();

All methods return the jBox instance so you can chain them:

var myModal = new jBox('Modal').setTitle('My Title').setContent('My Content').open();