jquery-stepModal

(Modal content display)

This plugin shows and hides existing page content triggered by user click or by calling a function. There are several options available, and any can be passed when the function is called.

Version

1.0

Options:

• debug (false) - writes messages to the FireBug console to let you know what is happening
• modal (true) - whether or not the modal window will close when the background is clicked and escape key is released
• transition (fade) - type of transition/animation to use when showing or hiding the content (see below for additional options)
• transitionIn (fade) - type of transition/animation to use when showing the content (if not included the transition value is used) (see below for additional options)
• transitionInTime (slow) - speed parameter for transitionIn jquery animation function, can be time in milliseconds or a valid jquery speed variable ('slow', 'fast')
• transitionOut (fade) - type of transition/animation to use when hiding the content (if not included the transition value is used) (see below for additional options)
• transitionOutTime (slow) - speed parameter for transitionOut jquery animation function, can be time in milliseconds or a valid jquery speed variable ('slow', 'fast')
• closeSelector (.modal-close) - css selector for close button. Any item with this selector will close the modal on click
• modalClass (stepModal) - class that will be applied to the modal background when it is opened (use to target styling)
• delayBackgroundAnimation (true) - should the background fade in before the content is animated
• appendSelector (body) - jQuery selector for element to append the modal background to
• backgroundTransitionSpeed ('fast') - speed for background fade in/out animation
• contentAnimationDelay (250) - delay between the background animation and the content animation
• dataAttribute (modaltarget) - data attribute name to use to specify modal target
• onOpen (void) - function called when modal is opened
• onClose (void) - function called when modal is closed

Transition Options:

• 'fade' - animate the opacity of the content element from 0 to 1 (in) or from 1 to 0 (out)
• 'slideDown' - animate the content element from -1.5 * height of the element to 0 (in) or from 0 to -1.5 * height of the element (out)
• 'show' - instantly show (in) or hide (out) the content element
• custom - pass in a custom function, for transitionIn and transitionOut, or pass in an array (2 elements), for transition to define in and out at the same time

License

MIT