Press "Enter" to skip to content

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

NameDefaultDescription
heightautoThe height of the dialog content. If ‘auto’, the height will grow with the content.
growToHeighttrueIf 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.
width600The width of the dialog content.
showCloseButtontrueIf true, the upper right close icon is visible.
closeOnEscapefalseIf true, the dialog can be dismissed by pressing escape on the keyboard.
closeOnOverlayClickfalseIf true, the dialog can be dismissed by clicking off of the dialog.
autoOpenfalseIf true, the dialog will open on load.
appendTodocument.bodyThe element to append the dialog DOM to. Usually you’ll want this to be the body of the page documents.
hideEmptyFootertrueIf true, the footer area will be hidden if no footer was defined.
hideEmptyTitlefalseIf true, the title/header area will be hidden if no title is defined, and the close button is hidden.
useTransitionstrueIf true, jQuery transitions/animations will be used when showing, hiding, or resizing the dialog.
animateDuration250The 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

NameDescription
onOpenTriggered when the dialog has been opened.
onPreCloseTriggered when the dialog is about to close. Preventing default will prevent the dialog from actually closing.
onCloseTriggered when the dialog has been closed.
onRepositionTriggered when the dialog has been recentered on the page.
onFlowTriggered when the dialog flow has changed.

Functions

NameArgumentsDescription
open(optional) indexOpens the dialog. If an index is passed in, it will open the dialog to that index in the flow.
close Closes the dialog
optionname, (optional) valueIf 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.
flowcommand, [arguments] 

Step-by-step Wizard Modal Plugin, FlowDialog Github


See Demo And Download

Official Website(PortableSheep): Click Here

This superior jQuery/javascript plugin is developed by PortableSheep. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *