Fancy Modal Window With Particles Animation - jQuery svg-popup.js

svg-popup.js is a lightweight, customizable, responsive, good-looking jQuery modal window plugin that comes with pretty awesome particles (confetti) open/close animations based on SVG shapes.

See It In Action:

How to use it:

1. Load the latest jQuery library and the svg-popup.js plugin's files in the document.

<link rel="stylesheet" href="/path/to/js/jQuery-svg-popup-min.css">
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/jQuery-svg-popup-min.js"></script>

2. Insert your modal content into a DIV container with a unique ID.

<div id="example">
  <div class="svg-popup-content">
    <h3>Modal Window</h3> 
    <p>This Is A Modal Window</p>
  </div>
</div>

3. Create a toggle button on the page and specify the modal ID in the data-svg-popup attribute.

<button type="button" class="toggle-button" data-svg-popup="example">
  Launch The Modal
</button>

4. Initialize the plugin on the toggle button and done.

$('.toggle-button').svgpopup({
  // options here
});

5. Config the modal & particles animations.

$('.toggle-button').svgpopup({

  // number of particles
  stepX:  12,
  stepY:  12,

  // fill colors
  fill: '#03BDD6',
  fillOdd: null,
  fillEven: null,

  // stroke color
  strokeFill: null,

  // opacity
  opacity: 0.8,

  // animation speed
  speed: 1.8,

  // 'triangle', 'rectangle'
  figure: 'triangle',

  // shows unordered particles on page load
  visible: false,

  // randomize particles
  randomize: true,

  // text for close button
  closeButtonText: '✖',

  // width & height of the modal window
  width:  $(window).width(),
  height: $(window).height(),
  
});

6. Trigger a function when the animation is finished.

$('.toggle-button').svgpopup({
  onAnimationComplate: function(){
    // do something
  }
});

---

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