Flow Dialog

Features

Flow

Define other dialog contents and link them so users can flow between them, like a wizard.

Each step in the flow can override basic options.

Overflow scrolling

Inspired by the bootstrap dialog, flowdialog will allow the entire dialog to be scrolled vertically (without scrolling the underlying page) if it overflows off the page.

Fixed height dialogs will allow the content to scroll vertically.

Transitions

Changes in height and width between flows use jQuery animations to make the changes visually appealing.

In the future, CSS transitions will be supported.

Markup based footer

The footer content is defined in the dialog HTML, allowing better customization, and more control over the behavior.

Flow option overrides

Each dialog in the flow can have their own options.

If no options are specified, it inherits the options of the main dialog in the flow.

Compatibility

IE9+
FireFox
Chrome

Demo

Single dialog

A simple single dialog, with defaut options.

Flow dialog

A dialog flow, with 3 steps, and transitions.

Dialog structure

Title

The dialog title is defined by supplying a "title" attribute on the dialogs main DOM node.

<div id="divSomeDialog" title="Your dialog title goes here"></div>

Footer

The dialog footer is defined by decorating a div in the dialog content, with a "data-type" attribute, with a value of "footer".

<div id="divSomeDialog" title="Your dialog title goes here"> <p>Your content goes here.</p> <div data-type="footer"> <span>Some footer content</span> </div> </div>

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

Examples

Creating a dialog

HTML

<div id="divDialogExample" title="Example Dialog">
    <p>Your dialog content goes here.</p>
    <div data-type="footer">
        <span>Your footer content goes here.</span> <button>Close</button>
    </div>
</div>

JavaScript

var $divDialogExample = $('#divDialogExample').flowdialog({
   height: 400,
   width: 700,
   growToHeight: false 
});

Creating a flow

HTML

<div id="divFlowDialog1" title="Step 1">
    <p>Your dialog content for step 1 goes here.</p>
    <div data-type="footer">
        <button class="btn-flow-cancel">Cancel</button>
        <button class="btn-flow-next">Next</button>
    </div>
</div>

<div id="divFlowDialog2" title="Step 2">
    <p>Your dialog content for step 2 goes here.</p>
    <div data-type="footer">
        <button class="btn-flow-cancel">Cancel</button>
        <button class="btn-flow-prev">Previous</button>
        <button class="btn-flow-next">Next</button>
    </div>
</div>

<div id="divFlowDialog3" title="Final Step">
    <p>Your dialogs content for the final step goes here.</p>
    <div data-type="footer">
        <button class="btn-flow-cancel">Cancel</button>
        <button class="btn-flow-prev">Previous</button>
        <button class="btn-flow-finish">Finish</button>
    </div>
</div>

JavaScript

var $divFlowDialog1 = $('#divFlowDialog1'),
    $divFlowDialog2 = $('#divFlowDialog2'),
    $divFlowDialog3 = $('#divFlowDialog3'),
    $btnFlowCancel = $('button.btn-flow-cancel'),
    $btnFlowPrev = $('button.btn-flow-prev'),
    $btnFlowNext = $('button.btn-flow-next'),
    $btnFlowFinish = $('button.btn-flow-finish');

//Create the main dialog instance.
$divFlowDialog1.flowdialog({
    height: 500,
    growToHeight: true,
    width: 700,
    flow: [{
        target: $divFlowDialog2,
        //Override the height/width of the dialog.
        height: 300,
        width: 500
    }, {
        //No height/width means it'll use the main instance defaults.
        target: $divFlowDialog3
    }] 
});

//Bind up the button handlers for the flows.
$btnFlowCancel.on('click', function(e) {
    e.preventDefault();
    //Close the flow dialog.
    $divFlowDialog1.flowdialog('close'); 
});

$btnFlowPrev.on('click', function(e) {
    e.preventDefault();
    //Flow to the previous step.
    $divFlowDialog1.flowdialog('flow', 'prev');    
});

$btnFlowNext.on('click', function(e) {
    e.preventDefault();
    //Flow to the next step.
    $divFlowDialog1.flowdialog('flow', 'next'); 
});

$btnFlowFinish.on('click', function(e) {
   e.preventDefault();
   //Perform some actions, then close the dialog.
   $divFlowDialog1.flowdialog('close'); 
});

Getting or setting option(s)

Setting

//Set single
$divDialogExample.flowdialog('option', 'height', 400);

//Set multiple
$divDialogExample.flowdialog('option', {
    'height': 400,
    'width': 600
});

Note: If using flow, the setting of option(s) applies to the active flow item.

Getting

var height = $divDialogExample.flowdialog('option', 'height');

Changelog

1.0.9
- Updated package and readme hosting for NPM.
1.0.8
- Fixed a bug where pressing escape to close the dialog when there are multiple flows causes the dialog resizing to go crazy.
- Added flowdialog_onInitComplete event.
1.0.7
- Fixed a bug where the reflow from fixed height to growToHeight could get stuck at the mid animation height.
1.0.6
- Changed return processing of commands to be more explicit.
1.0.5
- Changed flow navigation events to be unified.
1.0.4
- Added index argument to 'open', so you can open directly to a step in the flow.
1.0.3
- Fixed animation issues with IE.
1.0.2
- Added flow feature.
- Added flow animations.
1.0.1
- Added growToHeight option.
- Fixed scrolling issue on open due to dialog not having focus.
- Changed overflow CSS class to use auto scrollbars.

Some long content to show dialog scrolling

Bacon ipsum dolor sit amet turducken consectetur tongue, ham eiusmod pariatur adipisicing tail fugiat non ut. Culpa beef ribs est pork loin pork cillum dolore ex tail in. Corned beef do officia kielbasa sirloin culpa ribeye mollit cow sed filet mignon sunt shank ball tip. Brisket minim frankfurter pork belly, ut filet mignon pork tempor quis cupidatat shankle in ea.

Labore anim kevin landjaeger, pariatur id short ribs beef ribs. Nulla veniam cillum dolor, ut pork belly eiusmod laboris velit proident ut. Est shankle laboris swine. Adipisicing boudin pork chop aliqua doner aute.

Shankle non ad nisi short loin enim. Reprehenderit adipisicing ham prosciutto porchetta irure ground round in shankle exercitation pork loin eu. Dolore velit in tail. Hamburger elit andouille, tail reprehenderit swine fatback duis frankfurter ea spare ribs.