jQuery Speedo Popup

Speedo Popup is a small, powerful and real customizable jQuery Popup / modal plugin. Built with HTML5 and CSS3, Speedo Popup is not just a simple popup, Speedo Popup is:

  • a popup / modal box plugin
  • a notification plugin
  • a lightbox plugin
  • an alert box plugin

14 predefined SKINS

default theme

default theme

Preview this skin
blueglass theme

blueglass theme

Preview this skin
clouds theme

clouds theme

Preview this skin
dark theme

dark theme

Preview this skin
darkglass theme

darkglass theme

Preview this skin
ignito theme

ignito theme

Preview this skin
light theme

light theme

Preview this skin
lightbox theme

lightbox theme

Preview this skin
metro theme

metro theme

Preview this skin
notify-glass theme

notify-glass theme

Preview this skin
trap theme

trap theme

Preview this skin
snow theme

snow theme

Preview this skin
rain theme

rain theme

Preview this skin
winter theme

winter theme

Preview this skin
							<script type="text/javascript">
								$(document).ready(function(){
									$("body").speedoPopup({
										theme: "metro" // You can change theme name from here
									});
								});
							</script>
						
You have the posiblity to show a popup using the HTML only.
Don`t forget to include all plugin files! Please read our article about how you can set up jQuery Speedo Popup.

15 predefined CSS3 transitions

zoomIn css3 effect image

zoomIn

Show effect
zoomOut css3 effect image

zoomOut

Show effect
flipInHor css3 effect image

flipInHor

Show effect
flipInVer css3 effect image

flipInVer

Show effect
bounceIn css3 effect image

bounceIn

Show effect
pageTop css3 effect image

pageTop

Show effect
flyIn css3 effect image

flyIn

Show effect
fadeInScale css3 effect image

fadeInScale

Show effect
scaleDown css3 effect image

scaleDown

Show effect
fadeSpin css3 effect image

fadeSpin

Show effect
pulse css3 effect image

pulse

Show effect
leftSpeedIn css3 effect image

leftSpeedIn

Show effect
rollIn css3 effect image

rollIn

Show effect
rollOut css3 effect image

rollOut

Show effect
							<script type="text/javascript">
								$(document).ready(function(){
									$("body").speedoPopup(
									{
										css3Effects: "pulse"
									});
								});
							</script>
						
<a href="<ion:theme_url />assets/images/example-1.jpg?css3Effects=pulse"></a>
The css3Effects will override the effectIn or effectOut in modern browser that supports CSS3 animations.

7 predefined transitions

Example 2

incerto

Show effect
Example 2

slideLeft

Show effect
Example 2

slideRight

Show effect
Example 2

slideTop

Show effect
Example 2

slideBottom

Show effect
Example 2

slideZoom

Show effect
							<script type="text/javascript">
								// 
								$(document).ready(function(){
									$("body").speedoPopup({
										effectIn: "metro",
										effectOut: "metro" 
									});
									
								});
							</script>
						
The css3Effects will override the effectIn or effectOut in modern browser that supports CSS3 animations.

Other features in examples

Open iframe

Open an image

Open google maps

Open swf

Ajax enabled

Iframe example:
							<script type="text/javascript">
								$(document).ready(function(){
									$("body").speedoPopup(
									{
										width:850,
										height:565,
										useFrame: true,
										href: 'http://www.codecanyon.net/'
									});
								});
							</script>
						
Open an swf:
							<a href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf?width=640&height=360&theme=dark" class="speedo-popup">
								Click me to open swf
							</a>
						
Open an image:
							<a href="<ion:theme_url />assets/images/example-1.jpg" class="speedo-popup">
								Click me to open swf
							</a>