🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

stepframemodal is a jQuery plugin to create animated and heavily customizable modals & popups that cover the whole page with a fullscreen overlay.

Modal popup

Documentation

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


You May Also Like