Bootstrap Inspired Step-by-step Wizard Modal Plugin | jQuery FlowDialog

Flow dialog is a bootstrap-inspired modal dialog that is top-aligned and supports “flow” between multiple dialog contents. Flowing allows you to accomplish wizard-like workflows without leaving the dialog.

jquery smart wizard step validation, multi step form wizard jquery validation, jquery multi step form plugin, jquery plugin example, jquery steps, multi step form wizard with validation

How to make use of it:

1. To get began, include the FlowDialog plugin’s files on the web page.

<link href="/path/to/flowdialog.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.flowdialog.min.js"></script>

2. Create an easy, single-step modal window.

<div id="simpleDialog" title="Modal Title Here">
  <p>Modal Content Here</p>
  <div data-type="footer">
    OPTIONAL Modal Footer Here
    <button class="btnDialogCancel">Cancel</button>
  </div>
</div>

3. Create a multi-step modal window similar to a wizard.

<div id="flowDialogStep1" title="Flow Dialog Step 1">
  <p>Step 1</p>
  <div data-type="footer">
    <button class="btnFlowCancel">Cancel</button>
    <button class="btnFlowNext">Next</button>
  </div>
</div>
<div id="flowDialogStep2" title="Flow Dialog Step 2">
  <p>Step 2</p>
  <div data-type="footer">
    <button class="btnFlowCancel">Cancel</button>
    <button class="btnFlowPrev">Previous</button>
    <button class="btnFlowNext">Next</button>
  </div>
</div>
<div id="flowDialogStep3" title="Flow Dialog Step 3">
  <p>Step 3</p>
  <div data-type="footer">
    <button class="btnFlowCancel">Cancel</button>
    <button class="btnFlowPrev">Previous</button>
    <button class="btnFlowFinish">Finish</button>
  </div>
</div>

// Initialize the modal
var $flowDialogStep1 = $('#flowDialogStep1'),
    $flowDialogStep2 = $('#flowDialogStep2'),
    $flowDialogStep3 = $('#flowDialogStep3'),
    $btnFlowCancel = $('button.btnFlowCancel'),
    $btnFlowNext = $('button.btnFlowNext'),
    $btnFlowPrev = $('button.btnFlowPrev'),
    $btnFlowFinish = $('button.btnFlowFinish'),
    $btnLaunchFlowDialog = $('#btnLaunchFlowDialog');

$flowDialogStep1.flowdialog({
  flow: [
    {
      target: $flowDialogStep2,
      width: 700,
      height: 200
    },
    $flowDialogStep3
  ]
});

// Launch the modal
$flowDialogStep1.flowdialog('open');

$btnFlowCancel.on('click', function(e) {
  e.preventDefault();
  $flowDialogStep1.flowdialog('close');
});
$btnFlowNext.on('click', function(e) {
  e.preventDefault();
  $flowDialogStep1.flowdialog('flow', 'next');
});
$btnFlowPrev.on('click', function(e) {
  e.preventDefault();
  $flowDialogStep1.flowdialog('flow', 'prev');
});
$btnFlowFinish.on('click', function(e) {
  e.preventDefault();
  $flowDialogStep1.flowdialog('close');
});

$flowDialogStep1.on('flowdialog_onInitComplete', function() {
  console.log(arguments);
})

4. Available plugin choices.

$.flowdialog({

  // modal height
  height: 'auto',
  
  // modal width
  width: 600,

  // auto grows the modal based on the content
  growToHeight: false,

  // shows close button
  showCloseButton: true,

  // close the modal by pressing the ESC key
  closeOnEscape: false,

  // close the modal by clicking outside
  closeOnOverlayClick: false,

  // auto launch the modal on init
  autoOpen: false,

  // where the modal should append to
  appendTo: document.body,

  // hide footer if empty
  hideEmptyFooter: true,

  // hide title if empty
  hideEmptyTitle: false,

  // use CSS transitions
  useTransitions: true,

  // duration of the animation
  animateDuration: 250,

  // define steps here
  flow: []
  
});

5. API strategies.

// open a modal
$.flowdialog('open', index);

// close the modal
$.flowdialog('close');

// set/update an option
$.flowdialog('option', name, value);

// reposition the modal
$.flowdialog('reposition');

// change modal flows
$.flowdialog('flow', command, [arguments]);

Options

Name	Default	Description
height	`auto`	The height of the dialog content. If ‘auto’, the height will grow with the content.
growToHeight	`true`	If true, the ‘height’ option is considered the “max” height, and the content will grow to it. Once the height is exceeded, the content will vertically scroll.
width	`600`	The width of the dialog content.
showCloseButton	`true`	If true, the upper right close icon is visible.
closeOnEscape	`false`	If true, the dialog can be dismissed by pressing escape on the keyboard.
closeOnOverlayClick	`false`	If true, the dialog can be dismissed by clicking off of the dialog.
autoOpen	`false`	If true, the dialog will open on load.
appendTo	`document.body`	The element to append the dialog DOM to. Usually you’ll want this to be the body of the page documents.
hideEmptyFooter	`true`	If true, the footer area will be hidden if no footer was defined.
hideEmptyTitle	`false`	If true, the title/header area will be hidden if no title is defined, and the close button is hidden.
useTransitions	`true`	If true, jQuery transitions/animations will be used when showing, hiding, or resizing the dialog.
animateDuration	`250`	The amount of milliseconds animations will take to complete when `useTransitions = true` AND `useCSSTransitions = false`
flow	`[]`	An array of “flow” object maps, allowing you to link multiple dialog contents into a flow.

Events

Name	Description
onOpen	Triggered when the dialog has been opened.
onPreClose	Triggered when the dialog is about to close. Preventing default will prevent the dialog from actually closing.
onClose	Triggered when the dialog has been closed.
onReposition	Triggered when the dialog has been recentered on the page.
onFlow	Triggered when the dialog flow has changed.

Functions

Name	Arguments	Description
open	`(optional) index`	Opens the dialog. If an index is passed in, it will open the dialog to that index in the flow.
close		Closes the dialog
option	`name, (optional) value`	If no value is passed in, the value for the matching name will be returned. Otherwise, the value for the matching option will be set.
reposition		Repositions the dialog.
flow	`command, [arguments]`