Modal Window Effects with transitions CSS3. See the project page for documentation and a demonstration.
Runs in IE 8-11, Firefox, Chrome, Safari and Opera.
Found a bug? Please create an issue and include a publicly-accessible demonstration of the bug JSFiddle work well for demonstrating reproducible bugs, but you can use anything as long as it's publicly accessible.
Have an idea that improves Custombox? Please fork this repository, implement your idea (including documentation, if necessary), and submit a pull request to develop.
Include the custombox.min.js script:
<script src="custombox.min.js"></script>
Include the custombox.min.css stylesheet:
<link rel="stylesheet" href="custombox.min.css">
Make sure to also include the legacy.js file along for the older browsers.
<script src="legacy.min.js"></script>
document.getElementById('element').addEventListener('click', function ( e ) {
Custombox.open({
target: '#modal',
effect: 'fadein'
});
e.preventDefault();
});
Before you can build Custombox, you must install and configure the following dependencies on your machine:
-
Node.js: We use Node to run a development web server, run tests, and generate distributable files. Depending on your system, you can install Node either from source or as a pre-packaged bundle.
-
Grunt: We use Grunt as our build system. Install the grunt command-line tool globally with:
npm install -g grunt-cli
Once you have your environment setup just run:
grunt init
To execute end-to-end (e2e) tests, use:
grunt