This modal window plugin is made with native javascript, and it also works perfectly with jQuery.
Please note: These modal window animations only work on browsers that support their respective CSS3 properties. Internet Explorer 8 and 9 require legacy.min.js support, but no animations.
Online instance
Instructions
<script> $(function () { $('#element').on('click', function ( e ) { Custombox.open({ target: '#modal', effect: 'fadein' }); e.preventDefault(); }); }); </script>
Detailed parameter explanation
Name Type Property Descriptiontarget | string | null | Set the URL, ID or Class. |
id | string | number | null | Set the ID for the modal. |
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 or rotate (top, right, bottom, left and center) and flip (vertical or horizontal). Output position separated by commas. |
speed | number | 600 | Sets the speed of the transitions, in milliseconds. |