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] |
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.