Fork me on GitHub

About Custombox:

This plugin is created with native JavaScript but works perfectly with jQuery.

Please note: these animations only works as intended in browsers that support the respective CSS properties.
Internet Explorer 8 and 9 works add polyfill.io to src script but without animations.

Modern browsers only!

How to use:

1) Include custombox.min.js code:

In just about every case, it's best to place all your script references at the end of the page, just before: </body>.

<script src="custombox.min.js"></script>

2) Include custombox.min.css code:

Insert it in the section of your HTML document, after: <html>.

<link rel="stylesheet" href="custombox.min.css">

3) Call the plugin when the body is on load:

<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.getElementById('element').addEventListener('click', function ( e ) {
            Custombox.open({
                target: '#modal',
                effect: 'fadein'
            });
            e.preventDefault();
        });
    });
</script>
<script>
    $(function () {
        $('#element').on('click', function ( e ) {
            Custombox.open({
                target: '#modal',
                effect: 'fadein'
            });
            e.preventDefault();
        });
    });
</script>

Support for old browsers:

Add the script just before: <script src="custombox.min.js"></script>.

<script src="polyfill.io"></script>

Options (click on the rows for see a demo)

Name Type Property Description
target string null Set the URL, ID or Class.
cache boolean false If set to false, it will force requested pages not to be cached by the browser only when send by AJAX.
escKey boolean true Allows the user to close the modal when press escape key.
zIndex string | number auto Overlay z-index: Auto or number.
overlay boolean true Show the overlay.
overlayColor string #000 Overlay color.
overlayOpacity number 0.8 The overlay opacity level. Range: 0 to 1.
overlayClose boolean true Allows the user to close the modal by clicking the overlay.
overlaySpeed number 300 Sets the speed of the overlay, in milliseconds.
overlayEffect string auto Combine any of the effects.
width number | null null Set a fixed total width.
effect string fadein fadein | slide | newspaper | fall | sidefall | blur | flip | sign | superscaled | slit | rotate | letmein | makeway | slip | corner | slidetogether | scale | door | push | contentscale.
position string center, center Set position of modal. First position 'x': left, center and right. Second position 'y': top, center, bottom.
animation string | null null Only with effects: slide, flip and rotate (top, right, bottom, left and center) | (vertical or horizontal) and output position separated by commas.
speed number 600 Sets the speed of the transitions, in milliseconds.

Events

Event Type Description
open Callback that fires right before begins to open.
complete Callback that fires right after loaded content is displayed.
close Callback that fires once is closed.

Methods

Name Description
open Open Custombox.
close Close Custombox.
custombox.open Invoke the open method.
custombox.complete Invoke the complete method.
custombox.close Invoke the close method.

Tricks

- Open infinite modals: example.

Support:

- Find any bugs? Issues.

- Get old versions.

Credits:

- The animations CSS3 based on Codrops.

- This script can run with jQuery.

- The example page is built with Bootstrap 3.

- The page example code is built with Google Code Prettify.

- Support for old browsers polyfill.io.

Example

Custombox.open({
    target: 'demo/xhr/ajax.html'
});
Custombox.open({
    target: 'demo/xhr/ajax.html',     cache:  true
});
Custombox.open({
    target: '#modal',
    escKey: false
});
Custombox.open({
    target: '#modal',
    zIndex: 9999
});
Custombox.open({
    target:  '#modal',
    overlay: false
});
Custombox.open({
    target:       '#modal',
    overlayColor: '#00F'
});
Custombox.open({
    target:        '#modal',
    overlayOpacity: 0.2
});
Custombox.open({
    target:        '#modal',
    overlayClose: false
});
Custombox.open({
    target:       '#modal',
    overlaySpeed: 1200
});
Custombox.open({
    target:        '#modal',
    overlayEffect: 'makeway'
});
Custombox.open({
    target: '#modal',
    width:  1200
});
Custombox.open({
    target: '#modal',
    effect: 'newspaper'
});
Custombox.open({
    target:   '#modal',
    effect:   'fadein',
    position: 'center, top'
});
Custombox.open({
    target:   '#modal',
    effect:   'slide',
    animation: 'top, bottom'
});
Custombox.open({
    target: '#modal',
    speed:  1200
});
Custombox.open({
    target: '#modal',
    open:   function () {
        alert('open');
    }
});
Custombox.open({
    target:    '#modal',
    complete:   function () {
        alert('complete');
    }
});
Custombox.open({
    target:  '#modal',
    close:   function () {
        alert('close');
    }
});
Custombox.open({
    target:  '#modal'
});
Custombox.close(); document.addEventListener( 'custombox.open',
function () {     alert('open');
}, false);
document.addEventListener( 'custombox.complete',
function () {     alert('complete');
}, false);
document.addEventListener( 'custombox.close',
function () {     alert('close');
}, false);