en

jQuery-svg-popup

Tired of typical modal windows?!

  • There is a solution - jQuery-svg-popup.
  • Fast - the formation of particles is based on the SVG.
  • Lightweight - the weight of the plugin is only 5 KB.
  • Easy in use - documentation in English and Russian.
  • This solution will diversify the design of your website, as well as give uniqueness and style!

Download / Install

Examples

jquery-svg-popup
jquery-svg-popup
jquery-svg-popup
jquery-svg-popup
jquery-svg-popup
jquery-svg-popup

HTML markup

<script src="js/jquery.min.js"></script>
<script src="js/jQuery-svg-popup.js"></script>
<button type="button" 
	class="demo-btn demo1" 
	data-svg-popup="demo1"> Demo 1 </button>
                        

Plugin initialization in JavaScript

$('.demo1').svgpopup({
	stepX: 12,
	stepY: 9,
	figure: 'rectangle',
	fill: '#fcbf02',
	opacity: 0.6,
	speed: 1.2});
                        

HTML markup

<script src="js/jquery.min.js"></script>
<script src="js/jQuery-svg-popup.js"></script>
<button type="button" 
	class="demo-btn demo2" 
	data-svg-popup="demo2"> Demo 2 </button>
                        

Plugin initialization in JavaScript

$('.demo2').svgpopup({
	stepX: 8,
	stepY: 7,
	figure: 'rectangle',
	fillOdd: '#fff',
	fillEven: '#111',
	opacity: 0.9,	
	speed: 1.2});
                        

HTML markup

<script src="js/jquery.min.js"></script>
<script src="js/jQuery-svg-popup.js"></script>
<button type="button" 
	class="demo-btn demo3" 
	data-svg-popup="demo3"> Demo 3 </button>
                        

Plugin initialization in JavaScript

$('.demo3').svgpopup({			
	figure: 'rectangle',
	fill: '#fcbf02',
	randomize: false
});
                        

HTML markup

<script src="js/jquery.min.js"></script>
<script src="js/jQuery-svg-popup.js"></script>
<button type="button" 
	class="demo-btn demo4" 
	data-svg-popup="demo4"> Demo 4 </button>
                        

Plugin initialization in JavaScript

$('.demo4').svgpopup({
	stepX: 10,	
	stepY: 8,
	figure: 'triangle',
	fill: '#111',
	speed: 1.2,
	opacity: 0.8,
});
                        

HTML markup

<script src="js/jquery.min.js"></script>
<script src="js/jQuery-svg-popup.js"></script>
<button type="button" 
	class="demo-btn demo5" 
	data-svg-popup="demo5"> Demo 5 </button>
                        

Plugin initialization in JavaScript

$('.demo5').svgpopup({
	stepX: 6,	
	stepY: 4,
	figure: 'triangle',
	fill: '#fcbf02',
	strokeFill: 'rgba(255,255,255, .2)',
	opacity: 0.8,	
	visible: false,
	speed: 1,
	randomize: false
});
                        

HTML markup

<script src="js/jquery.min.js"></script>
<script src="js/jQuery-svg-popup.js"></script>
<button type="button" 
	class="demo-btn demo6" 
	data-svg-popup="demo6"> Demo 6 </button>
                        

Plugin initialization in JavaScript

$('.demo6').svgpopup({
	stepX: 8,	
	stepY: 6,
	figure: 'triangle',
	fillOdd: '#fcbf02',
	fillEven: '#111',
	opacity: 0.9,	
	visible: false,
	speed: 1
});
                        

Documentation

  • Properties
  • Value
  • Type
  • Description
  • stepX
  • 12
  • Number
  • Number of particles by width of the screen
  • stepY
  • 10
  • Number
  • Number of particles by height of the screen
  • fill
  • #03BDD6
  • String
  • Color of the figures of the popup
  • fillOdd
  • null
  • String
  • Color of even particles
  • fillEven
  • null
  • String
  • Color of odd particles
  • strokeFill
  • null
  • String
  • Border color of particles
  • opacity
  • 0.8
  • Number
  • Background opacity
  • speed
  • 1.8
  • Number
  • Animation duration of particles
  • figure
  • triangle
  • String
  • Figure type of popup particles ('triangle','rectangle')
  • visible
  • false
  • Boolean
  • Display random position of particles when the page is loaded
  • randomize
  • true
  • Boolean
  • More chaotic arrangement of figures
  • closeButtonText
  • String
  • Close button text
  • onAnimationComplate
  • undefined
  • Function
  • Callback function in complete the animation of figures

More jQuery plugins for the Website

jQuery-svg-progress

This is a unique jQuery plugin that allows you to display infographics on your web pages.Within using it you can diversify your web app or page with one of six shapes, and also have the option to add a custom outline from…

jQuery-svg-progress