Fancy Modal Animations With jQuery And CSS3 - modalAnimate.js

File Size: 10.2 KB
Views Total: 9075
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Fancy Modal Animations With jQuery And CSS3 - modalAnimate.js

modalAnimate.js is a jQuery plugin that lets you create fullscreen modal windows with pretty cool CSS3 powered animations when opening and closing.

CSS3 animations included:

  • Unfolding
  • Revealing
  • Uncovering
  • Blow Up
  • Meep Meep
  • Sketch
  • Bond
  • Or your own CSS3 animations.

How to use it:

1. Load jQuery library together with the 'modalanimate.css' and 'modalanimate.js' files in your html document.

<link rel="stylesheet" href="css/modalanimate.css">
<script src="//"></script>
<script src="js/modalAnimate.js"></script>

2. Create the html for the modal window.

<div id="modal-container">
  <div class="modal-background">
    <div class="modal">
      <h2>I'm a Modal</h2>
      <p>Hear me roar.</p>
      <svg class="modal-svg" xmlns="" width="100%" height="100%" preserveAspectRatio="none">
        <rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>

3. Show the modal window with an unfolding animation.


4. Change the default modal container.


5. Change the default modal animation.

  // or ...
  // 'revealing'
  // 'unfolding'
  // 'blown-up'
  // 'meep'
  // 'sketch'
  // 'bond'

6. Trigger a custom callback function on modal close.

  modalClose: function() {}

7. Show the modal window on page load.

  autoEffect: true

This awesome jQuery plugin is developed by sumn2u. For more Advanced Usages, please check the demo page or visit the official website.