jquery.dirtyforms.dialogs.bootstrap

This is a dialog module for the jQuery Dirty Forms project.

Purpose

This module causes Dirty Forms to use Bootstrap Modal as its dialog when the user attempts to leave the page by clicking a hyperlink (but not when interacting with the navigation buttons of the browser).

Only 1 dialog module can be used by Dirty Forms at a time. The default behavior without this package is to use the browser's built in dialog that is fired by the beforeunload event.

Prerequisites

Prerequesites must be included in this order:

• jQuery (>= 1.9.1)
• bootstrap (>= 3.0.0) - both the CSS and JS
• jquery.dirtyforms (>= 1.0.0)

If you are using a Package Manager, these dependencies will be installed automatically, but depending on your environment you may still need to add references to them manually.

Download & Installation

There are several different ways to get the code. Some examples below:

CDN

The Bootstrap Modal dialog module is available over jsDelivr CDN and can directly be included on every page.

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.dirtyforms/2.0.0/jquery.dirtyforms.dialogs.bootstrap.min.js"></script>

jsDelivr also supports on-the-fly concatenation of files, so you can reference only 1 URL to get jQuery, bootstrap, jquery.dirtyforms, and jquery.dirtyforms.dialogs.bootstrap in one request.

<script type="text/javascript" src="//cdn.jsdelivr.net/g/[email protected],[email protected],[email protected](jquery.dirtyforms.min.js+jquery.dirtyforms.dialogs.bootstrap.min.js)"></script>

Self-Hosted

Download and save one of two available files to include the Bootstrap Modal dialog module to your page, either the latest distribution or the latest minified version.

<script type="text/javascript" src="jquery.dirtyforms.dialogs.bootstrap.min.js"></script>

You can also conveniently get all of the latest Dirty Forms files in one Zip Download.

Package Managers

The Bootstrap Modal dialog module is even available through NPM, Bower, and NuGet. Just use one of the following commands below to install the dialog module, including all dependencies.

// NPM
$ npm install jquery.dirtyforms.dialogs.bootstrap

// Bower
$ bower install jquery.dirtyforms.dialogs.bootstrap

// NuGet
PM> Install-Package jquery.dirtyforms.dialogs.bootstrap

SourceMaps

A SourceMap file is also available via CDN or your favorite package manager.

CDN

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.dirtyforms/2.0.0/jquery.dirtyforms.dialogs.bootstrap.min.js.map"></script>

Package Managers

NPM, Bower, and NuGet will install the SourceMap file into the destination directory.

jquery.dirtyforms.dialogs.bootstrap.min.js.map

Usage

This dialog module is automatic. Simply include the reference to the dialog module after the prerequisites and use Dirty Forms as per the documentation and Bootstrap Modal as per the documentation. However, it is also possible to customize the HTML.

// CSS
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3.0.0/css/bootstrap.min.css" />

// JavaScript
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
<script src="//cdn.jsdelivr.net/bootstrap/3.0.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="//cdn.jsdelivr.net/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js" type="text/javascript"></script>
<script src="//cdn.jsdelivr.net/jquery.dirtyforms/2.0.0/jquery.dirtyforms.dialogs.bootstrap.min.js" type="text/javascript"></script>

If not using a CDN, you need to apply the dependencies in the same order as in the example above.

Options

The following options are available to set via $.DirtyForms.dialog.OPTIONNAME = OPTIONVALUE or get via OPTIONVALUE = $.DirtyForms.dialog.OPTIONNAME

Setting the width of the bootstrap modal requires custom CSS to ensure it will work with different viewport sizes. See this page for examples.

Customization

Because Bootstrap requires ultimate control over the HTML in order to function, it is possible to provide your own HTML either directly into the page or via JavaScript. Simply add it to the page and ensure that the following match what is specified in the options.

1. dialogID (required)
2. titleID (optional)
3. messageClass (optional)
4. proceedButtonClass (required)
5. stayButtonClass (optional)

Example

$('<div id="custom-dialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-title">' +
	'<div class="modal-dialog" role="document">' +
		'<div class="modal-content panel-danger">' +
			'<div class="modal-header panel-heading">' +
				'<button type="button" class="close" data-dismiss="modal" aria-label="Close">' + 
					'<span aria-hidden="true">&times;</span>' + 
				'</button>' +
				'<h3 class="modal-title" id="custom-title"></h3>' +      
			'</div>' +
			'<div class="modal-body panel-body custom-message"></div>' +
			'<div class="modal-body panel-body">This is some custom text to include in the dialog.</div>' +
			'<div class="modal-footer panel-footer">' +
				'<button type="button" class="custom-proceed btn btn-primary" data-dismiss="modal"></button>' +
				'<button type="button" class="custom-stay btn btn-default" data-dismiss="modal"></button>' +
			'</div>' +
		'</div>' +
	'</div>' +
'</div>').appendTo('body');


$('form').dirtyForms({
	// Message will be shown both in the Bootstrap Modal dialog 
	// and in most browsers when attempting to navigate away 
	// using browser actions.
	message: 'This is a custom message',
	dialog: {
		title: 'This is a custom title',
		dialogID: 'custom-dialog', 
		titleID: 'custom-title', 
		messageClass: 'custom-message', 
		proceedButtonClass: 'custom-proceed', 
		stayButtonClass: 'custom-stay' 
	}
});

// If .dirtyForms() has already been called, you can override
// the values after the fact like this.
$.DirtyForms.dialog.title = 'This is an alternative custom title';

Support

For help or to report a bug please open an issue at the Dirty Forms development site.