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
   
Responsive jQuery Modal Window Plugin with CSS3 Transitions - Custombox

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');">&times;</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.