如何使用它:

1.在文档中加载最新的jQuery库和svg-popup.js插件的文件。

<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.将模态内容插入到具有唯一ID的DIV容器中。

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

3.在页面上创建一个切换按钮，并在数据svg弹出窗口属性

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

4.在切换按钮上初始化插件并完成。

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

5.配置模态和粒子动画。

$('.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.动画完成后触发一个函数。

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

预览截图

带粒子动画 花式模式窗口 jQuery svg popup.js