Responsive jQuery Modal Window Plugin with CSS3 Transitions - Custombox
File Size: | 80.6 KB |
---|---|
Views Total: | 52911 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Custom Box is a powerful jQuery plugin that makes use of CSS3 transitions to create awesome modal window effects with lots of animations and options to fit your needs.
Features:
- Responsive designed that the modal window will auto resize to fit within the container.
- Supports all the modern browsers. (Internet Explorer 8 and 9 works, but without animations.)
- 15 built-in animation effects. (fadein | slide | newspaper | fall | sidefall | blur | flip | sign | superscaled | slit | rotate | letmein | makeway | slip | blur )
- Allows the user to close the modal by pressing 'ESC' key.
- Has the ability to create your own animation effects.
- Also supports ajax content, callback events, overlays and more.
View More Modal Plugins At:
Basic Usage:
1. Load the latest version of jQuery library and jQuery custom box plugin at the bottom of your web page
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="src/jquery.custombox.js"></script>
2. Load the required jQuery custom box stylesheet file in the header
<link rel="stylesheet" href="src/jquery.custombox.css">
3. Create the modal box content
<div id="modal" style="display: none;"> <div> <button type="button" class="close" onclick="$.fn.custombox('close');">×</button> <h4> Title </h4> </div> <div> <p> ... </p> </div> </div>
4. Create a link to popup the modal window
<a href="#modal" id="demo">Click Me</a>
5. Call the plugin and you're done
$(function() { $('#demo').on('click', function( e ) { Custombox.open({ target: '#modal', effect: 'fadein' }); e.preventDefault(); }); });
6. All the options
target: null, // Set the URL, ID or Class. cache: false, // If set to false, it will force requested pages not to be cached by the browser only when send by AJAX. escKey: true, // Allows the user to close the modal by pressing 'ESC'. zIndex: 9999, // Overlay z-index: Auto or number. overlay: true, // Show the overlay. overlayColor: '#000', // Overlay color. overlayOpacity: 0.8, // The overlay opacity level. Range: 0 to 1. overlayClose: true, // Allows the user to close the modal by clicking the overlay. overlaySpeed: 300, // Sets the speed of the overlay, in milliseconds. overlayEffect: 'auto', // Combine any of the effects. width: null, // Set a fixed total width or 'full'. effect: 'fadein', // fadein | slide | newspaper | fall | sidefall | blur | flip | sign | superscaled | slit | rotate | letmein | makeway | slip | corner | slidetogether | scale | door | push | contentscale | swell | rotatedown | flash. position: ['center', 'center'], // Set position of modal. First position 'x': left, center and right. Second position 'y': top, center, bottom. animation: null, // Only with effects: slide, flip and rotate (top, right, bottom, left and center) | (vertical or horizontal) and output position. Example: ['top', 'bottom']. speed: 500, // Sets the speed of the transitions, in milliseconds. loading: false, // Show loading. open: null, // Callback that fires right before begins to open. complete: null, // Callback that fires right after loaded content is displayed. close: null // Callback that fires once is closed.
Change logs:
v4.0.3 (2017-06-17)
- Bug fix remvoe container classes
- Bug fix fullscreen method
v3.0.1 (2015-09-11)
- Bug fix on close.
- Bug fix full width.
- Add loading delay.
- Add info legacy.
- Add new effect: Flash.
- Add new effect: Rotate down.
- Add new effect: Swell.
- Some bug fixes.
- Add loading.
- Add full width.
- Update demo page.
- Code refactor.
- Add callback close.
v2.0.0 (2014-11-02)
- The code is 100% rewritten.
- Update effects.
- New effects.
- Responsive 100%.
- Native and pure 100% JavaScript.
- Combine and minify CSS and JS.
- Updated demo page.
v1.1.3 (2014-02-18)
- Remove unnecessary code.
- Bug fix on the text to be displayed when there is an error.
v1.1.2 (2013-12-11)
- Bug fix on callback that fires once is closed in the overlay.
- Bug fix IE8 when open the modal.
- Changes in the sample page.
v1.0.2 (2013-10-08)
- Bug fix close callback not triggered
This awesome jQuery plugin is developed by dixso. For more Advanced Usages, please check the demo page or visit the official website.