<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jboxcdn.com/0.3.2/jBox.min.js"></script>
<link href="http://code.jboxcdn.com/0.3.2/jBox.css" rel="stylesheet">

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

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>

new jBox(‘Confirm‘, {
    confirmButton: ‘Do it!‘,
    cancelButton: ‘Nope‘
});
 
<div onclick="doit()" 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>

var colorsN2 = [‘red‘, ‘green‘, ‘blue‘, ‘yellow‘];
            var currentColorN2 = 0;
            jQuery(‘#notice‘).click(function() {
                new jBox(‘Notice‘, {
                    animation: ‘flip‘,
                    position: {
                        x: 15,
                        y: 65
                    },
                    content: ‘Oooh! They also come in colors!‘,
                    onInit: function() {
                        this.options.color = colorsN2[currentColorN2];
                        currentColorN2++;
                        (currentColorN2 >= colorsN2.length) && (currentColorN2 = 0);
                    },
                    zIndex: 12000
            });
 });

var colorsN3 = [‘red‘, ‘green‘, ‘blue‘, ‘yellow‘];
    var titlesN3 = [‘Oops‘, ‘Well done‘, ‘Reminder‘, ‘Attention‘];
    var contentsN3 = [‘Sorry, something went wrong‘, ‘You perfectly clicked a button‘, ‘Don\‘t forget to click the button one more time‘, ‘Take care out there‘];
    var currentColorN3 = 0;
    jQuery(‘#demoN3‘).click(function() {
        new jBox(‘Notice‘, {
            attributes: {
                x: ‘left‘,
                y: ‘bottom‘
            },
            theme: ‘NoticeBorder‘,
            color: ‘black‘,
            audio: ‘/libraries/jBox/Source/audio/bling2‘,
            volume: noticeN3Volume,
            animation: {
                open: ‘slide:bottom‘,
                close: ‘slide:left‘
            },
            onInit: function() {
                this.options.color = colorsN3[currentColorN3];
                this.options.title = titlesN3[currentColorN3];
                this.options.content = contentsN3[currentColorN3];
                currentColorN3++;
                (currentColorN3 >= colorsN3.length) && (currentColorN3 = 0);
            },
        });
    });

var colorsN4 = [‘black‘, ‘red‘, ‘green‘, ‘blue‘, ‘yellow‘];
    var currentColorN4 = 0;
    jQuery(‘#demoN4‘).click(function() {
        new jBox(‘Notice‘, {
            autoClose: 10000,
            attributes: {
                x: ‘right‘,
                y: ‘bottom‘
            },
            stack: false,
            animation: {
                open: ‘tada‘,
                close: ‘zoomIn‘
            },
            title: ‘Tadaaa! I\‘m single!‘,
            content: ‘Open another notice to close me!‘,
            onInit: function() {
                this.options.color = colorsN4[currentColorN4];
                currentColorN4++;
                (currentColorN4 >= colorsN4.length) && (currentColorN4 = 0);
            },
        });
    });