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

							<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

							<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

							<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

Show example

Open an image

Show example

Open google maps

Show example

Open swf

Show example

Ajax enabled

Show example

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>