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.
jQuery aria-dialog.js
| 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 |
- 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.
$(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,
});
});This project is licensed under the terms of the MIT license.
See LICENSE.md for detailed informations.