jquery.dirtyforms.dialogs.blockui
This is a dialog module for the jQuery Dirty Forms project.
Purpose
This module causes Dirty Forms to use BlockUI 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
beforeunloadevent.
Prerequisites
Prerequesites must be included in this order:
- jQuery (>= 1.7)
- BlockUI (>= 2.70)
- 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 BlockUI 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.blockui.min.js"></script>jsDelivr also supports on-the-fly concatenation of files, so you can reference only 1 URL to get jQuery, BlockUI, jquery.dirtyforms, and jquery.dirtyforms.dialogs.blockui in one request.
<script type="text/javascript" src="//cdn.jsdelivr.net/g/jquery@1.11.3,jquery.blockui@2.70.0,jquery.dirtyforms@2.0.0(jquery.dirtyforms.min.js+jquery.dirtyforms.dialogs.blockui.min.js)"></script>Self-Hosted
Download and save one of two available files to include the BlockUI dialog module to your page, either the latest distribution or the latest minified version.
<script type="text/javascript" src="jquery.dirtyforms.dialogs.blockui.min.js"></script>You can also conveniently get all of the latest Dirty Forms files in one Zip Download.
Package Managers
The BlockUI 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.blockui
// Bower
$ bower install jquery.dirtyforms.dialogs.blockui
// NuGet
PM> Install-Package jquery.dirtyforms.dialogs.blockui
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.blockui.min.js.map"></script>Package Managers
NPM, Bower, and NuGet will install the SourceMap file into the destination directory.
jquery.dirtyforms.dialogs.blockui.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 BlockUI as per the documentation.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script><script src="//cdn.jsdelivr.net/jquery.blockui/2.70.0/jquery.blockUI.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.blockui.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
| Name | Type | Default | Description |
|---|---|---|---|
| title | string | 'Are you sure you want to do that?' | Sets the title of the dialog. |
| class | string | 'dirty-dialog' | Sets the CSS class of the SPAN element that contains all of the elements of the dialog. |
| proceedButtonText | string | 'Leave This Page' | Sets the text of the continue button of the dialog. |
| stayButtonText | string | 'Stay Here' | Sets the text of the cancel button of the dialog. |
| width | string | '400px' | Sets the width of the dialog (passes the value to the css.width property of BlockUI). |
| padding | string | '10px' | Sets the padding of the dialog (passes the value to the css.padding property of BlockUI). |
| color | string | '#000' | Sets the foreground color of the dialog (passes the value to the css.color property of BlockUI). |
| border | string | '3px solid #aaa' | Sets the border of the dialog (passes the value to the css.border property of BlockUI). |
| backgroundColor | string | '#fff' | Sets the background color of the dialog (passes the value to the css.backgroundColor property of BlockUI). |
| overlayOpacity | float | 0.5 | Sets the opacity of the dialog overlay (passes the value to the overlayCSS.opacity property of BlockUI). |
Support
For help or to report a bug please open an issue at the Dirty Forms development site.