Step-by-step Wizard Modal Plugin - jQuery FlowDialog

FlowDialog is a multi-step modal jQuery plugin for creating animated, configurable, Bootstrap inspired, and wizard-style popup windows.

How to use it:

1. To get started, include the FlowDialog plugin's files on the 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 a simple, 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>

// Initialize the modal
var $simpleDialog = $('#simpleDialog'),
    $btnDialogCancel = $('button.btnDialogCancel', $simpleDialog);
$simpleDialog.flowdialog({
  // options here
});

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

// Close the modal when clicking the cancel button
$btnDialogCancel.on('click', function(e) {
  e.preventDefault();
  $simpleDialog.flowdialog('close');
});

3. Create a multi-step modal window just like 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 options.

$.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 methods.

// 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]);

6. Available events.

• @onOpen: Triggered when the modal has been opened.
• @onPreClose: Triggered when the modal is about to close.
• @onClose: Triggered when the modal has been closed.
• @onReposition: Triggered when the modal has been recentered.
• @onFlow: Triggered when the modal flow has changed.

---

This awesome jQuery plugin is developed by PortableSheep. For more Advanced Usages, please check the demo page or visit the official website.