Fancy Modal Window With Particles Animation - jQuery svg-popup.js
File Size: | 166 KB |
---|---|
Views Total: | 711 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.