Aria-dialog-generator NPM

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.

@everything-registry/sub-chunk-1162 @infinitebrahmanuniverse/nolb-ari

2.0.0

7 years ago