jQuery Modal Window Effects with transitions CSS3.
Please note: these animations only works as intended in browsers that support the respective CSS properties.
Internet Explorer 8 and 9 works, but without animations.
@@ -163,10 +166,11 @@ Call the plugin when the body is on load:
<script>
window.onload = function () {
- document.getElementById('example').addEventListener('click', function () {
+ document.getElementById('example').addEventListener('click', function ( e ) {
custombox( this, {
effect: 'fadein'
});
+ e.preventDefault();
}, false );
};
</script>
@@ -192,9 +196,9 @@ 4) Call the plugin when the body is on load:
<script>
$(function () {
- $('#element').on('click', function () {
+ $('#element').on('click', function ( e ) {
$.fn.custombox( this );
- return false;
+ e.preventDefault();
});
});
</script>
@@ -283,7 +287,7 @@ - Example
-$('#example1').on('click', function () {
+
+$('#example1').on('click', function ( e ) {
$.fn.custombox( this, {
overlay: false,
effect: 'fadein'
});
- return false;
+ e.preventDefault();
});
- Example
-$('#example2').on('click', function () {
+
+$('#example2').on('click', function ( e ) {
$.fn.custombox( this, {
effect: 'newspaper'
});
- return false;
+ e.preventDefault();
});
- Example
-$('#example4').on('click', function () {
+
+$('#example4').on('click', function ( e ) {
$.fn.custombox( this, {
effect: 'slit'
});
- return false;
+ e.preventDefault();
});
- Example
-$('#example5').on('click', function () {
+
+$('#example5').on('click', function ( e ) {
$.fn.custombox( this, {
open: function () {
alert('open');
@@ -381,37 +394,83 @@ Callbacks
alert('close');
}
});
- return false;
+ e.preventDefault();
});
- Example
-$('#example6').on('click', function () {
+
+$('#example6').on('click', function ( e ) {
$.fn.custombox( this );
- return false;
+ e.preventDefault();
});
- Example
-$('#example7').on('click', function () {
+
+$('#example7').on('click', function ( e ) {
$.fn.custombox( this, {
- effect: 'fadein',
- overlayColor: '#FFF',
+ effect: 'fadein',
+ overlayColor: '#FFF',
overlayOpacity: 1,
- customClass: 'justme',
- speed: 200
+ customClass: 'justme',
+ speed: 200
});
- return false;
+ e.preventDefault();
});
- Example
+
+$('#example8').on('click', function ( e ) {
+ $.fn.custombox( this, {
+ effect: 'slide',
+ position: 'center',
+ customClass: 'customslide',
+ speed: 200
+ });
+ e.preventDefault();
+});
+
+
+.custombox-close.customslide .custombox-modal-content {
+ -webkit-transform: scale(2);
+ -ms-transform: scale(2);
+ -o-transform: scale(2);
+ transform: scale(2);
+ opacity: 1;
+ -webkit-transition-property: all;
+ -ms-transition-property: all;
+ -o-transition-property: all;
+ transition-property: all;
+}
+
+ - Example
+
+$('#example8').on('click', function ( e ) {
+ $.fn.custombox( this, {
+ effect: 'slide',
+ position: 'left, right'
+ });
+ e.preventDefault();
+});
+
+ - Find any bugs? Issues.
@@ -446,9 +505,13 @@