aria-dialog-generator
v2.0.0
Published
Extremly small jQuery plugin extension for **[aria-dialog.js](https://github.com/DavideTriso/aria-dialog)** to dinamically inject dialogs in the markup.
Downloads
1
Readme
ARIA DIALOG GENERATOR
Extremly small jQuery plugin extension for aria-dialog.js to dinamically inject dialogs in the markup.
Get aria-dialog.js at https://github.com/DavideTriso/aria-dialog.
Dependencies
jQuery aria-dialog.js
Settings / Options
Name | Default | Type | Description | Required or optional
-----|---------|------|-------------|----------
dialogId | '' (empty) | string | Id of the dialog. | optional (recommended)
dialogClass | dialog | string | Class of a dialog element. | optional
wrapperClass | dialog__wrapper | string | Class of a dialog wrapper. | optional
containerClass | dialog__container | string | Class of a dialog container. | optional
headerClass | dialog__header | string | Class of a dialog header. | optional
headingClass | dialog__heading | string | Class of a dialog heading. | optional
bodyClass | dialog__body | string | Class of a dialog body | optional
heading | <h2 class="dialog__heading">Heading required</h2> | string | The heading of the dialog (include markup). | required
visibleHeading | true | bool | If false, the string passed to heading will be used to set the aria-label attribute on the dialog, instead of a visible heading. | optional
dismissBtn | '' (empty) | string | Add a close button in the header of the dialog (include markup) | optional (recommended)
content | '' (empty) | string | The content of the dialog (inlude markup). | required
Usage
- Include the JS script aria-dialog-generator.js - or the minified production script aria-dialog-generator.min.js- in the head or the body of your HTML file.
- Initialise the widget within an inline script tag, or in an external JS file.
Example
$(document).ready(function () {
'use strict';
//Save main content of the dialog in a variable
var dialogContent = '<p>Hey there! I am a dynamically generated dialog.' +
'Close me with a click on the following button:</p>' +
'<button type="button" id="dynamic-modal-close-btn">Close dialog</button>';
//Call ariaDialogGenerator to inject a dialog in the markup
//Append dialog as last child of the `<body>`
//it is possible to append the dialog to any html element inside the body
$('body').ariaDialogGenerator(
//pass array with settings as parameter
{
dialogId: 'dynamic-modal', //Set Id
dialogDismissBtn: '<button type="button" class="dialog__dismiss-btn" id="dynamic-modal-dismiss-btn">X</button>', //include a dismiss button in the dialog
dialogContent: dialogContent
});
//After the dialog has been generated and injected in the html ...
// .. initialise the dialog as described in the readme of the **aria-dialog.js** plugin
$('#dynamic-dialog').ariaDialog({
option1: value,
});
});
LICENSE
This project is licensed under the terms of the MIT license.
See LICENSE.md for detailed informations.