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

Options

Property

Type

Description

Possible Values

Default

width

String, Number

Width of the popup container. If this parameter is null, the width will be automatically adjusted from the content width.

pixels

null

height

String, Number

null, the height will be automatically adjusted from the content height.

pixels

null

left

String, Number

Left position, of the popup container. If this value is either null or 'center', the container will automatically be centered.

pixels

'center'

top

String, Number

null or 'center', the container will automatically be centered.

pixels

'center'

close

Boolean

Show close icon

true, false

true

closeCaption

String

null or an empty string, the close buton will have no text/html caption.

caption text

empty string

theme

String

Select popup skin. If the skin don't exists, the popup will be loaded with the default skin.

skin name

'default'

htmlContent

String

null or false, the htmlContent parameter will be ignored and the popup will try to use the href property.

content passed as, string containing html code

'<p> Default content </p>'

caption

String

Popup caption. If this is, null or empty string, the popup caption will not be created.

caption text

null

href

String

null or false, the popup will try to load the content from htmlContent property.

content address

null

overlayClose

Boolean

Close popup when overlay is clicked.

true, false

true

autoClose

Number

Wait an ammount of time, after that time passed, the popup will close automatically.

false

false

autoShow

Number

Wait an ammount of time, after which the popup will, show.

number in ms, false

false

effectIn

String

Effect used while the popup is showing.

none',

'fade',

'growBox',

'incerto',

'slideLeft',

'slideTop',

'slideRight',

'slideBottom',

'slideZoom',

custom effect name

none'

effectOut

String

Effect used while the popup is hiding.

'none',

'fade',

'growBox',

'incerto',

'slideLeft',

'slideTop',

'slideRight',

'slideBottom',

'slideZoom',

custom effect name

'none'

css3Effects

String

CSS3 effect used while the popup is showing or hiding. This effect will override the effectIn or effectOut, in modern browser that supports CSS3 animations.

none',

'zoomIn',

'zoomOut',

'flip',

'flipInHor',

'flipInVer',

'bounceIn',

'pageTop',

'flyIn',

'fadeInScale',

'scaleDown',

'fadeSpin',

'pulse',

'leftSpeedIn',

'rollIn',

'rollOut',

'pulseBody',

'fadeSpinBody',

custom effect name

false

useFrame

Boolean

Force the content to load into an iFrame. The href property will be used as the iframe url, the htmlContent property will be ignored.

true, false

false

useAjax

Boolean

Force the content to load with an ajax call. The href property will be used as the url for the ajax call, the htmlContent property will be ignored.

false

false

loadingImage

Boolean

Show loading image while the content is being loaded.

true, false

true

unload

Boolean

Destroy the popup completley (Remove the html code from page). If this is set to false, the popup will just be hidden, this can be used so the popup starts faster.

false

true

draggable

Boolean

Enable window dragging.

true, false

false

responsive

Boolean

Enable responsive popup. If this is enabled, the popup will automatically resize , to fit inside the browser window.

false

true

buttons

Object

Add custom buttons to the popup.

[{html: 'About', action: function ()  { alert('Speedo Popup'); }, class: 'button-test'}, ...]

null

onBeforeShow

Function

Called beffore the popup is showing.

function () { ... }

function(){}

onShow

Function

Called when the popup is showing,

function () { ... }

function () {}

onComplete

Function

Called after the content, finished loading.

function () { ... }

function () {}

onHide

Function

Called when the popup is hiding.

function () { ... }

function () {}

onClose

Function

Called when the popup receives a close command.

function () { ... }

function () {}

autoplayAudio

Boolean

Do we want to play the audio automatically ?

true, false

true

loop

Boolean

Do we start from the begginning when the song ends ?

true, false

false

mp3Path

String

Path to the MP3 audio file. The path is relative to the page location,

path

undefined

oggPath

String

Path to the OGG audio file. The path is relative to the page location.

path

undefined

volume

Number

Set  volume level.

any number  between 0 and

1

onAudioStart

Function

Called when the audio starts..

function () { ... }

function () { ... }

onAudioStop

Function

Called when the audio is stopping.

function () { ... }

function () { ... }

startCount

Number

How many times the popup will be shown to a user.

number

0

interval

Number

The amount of time in days until the cookie expires.

number in days

30

esc

Boolean

Close the popup when ESC key is pressed.

true, false

true