Browse Source

Modal Box : le retour à la fermeture ne permettait plus de rouvrir la même box.

+ màj du ReadMe
master
RealET 5 months ago
parent
commit
1f7615076b
  1. 8
      javascript/jquery-accessible-modal-window-aria/README.md
  2. 2
      javascript/jquery-accessible-modal-window-aria/jquery-accessible-modal-window-aria.js

8
javascript/jquery-accessible-modal-window-aria/README.md

@ -23,7 +23,13 @@ Simply put class="js-modal" on a button or a link to activate the script.
- Attribute <code>data-modal-close-title</code>: the title attribute of the close button in your modal window.
- Attribute <code>data-modal-background-click="disabled"</code>: disable the possibility to click outside the modal window to close it.
- Attribute <code>data-modal-close-img</code>: a path to a valid image for the close button.
- Attribute <code>data-modal-focus-id</code>: when opening a modal, provides focus to the matching <code>id</code> (see [example on “It’s free” button](https://a11y.nicolas-hoffmann.net/modal/)).</li>
- Attribute <code>data-modal-focus-id</code>: when opening a modal, provides focus to the matching <code>id</code> (see [example on “It’s free” button](https://a11y.nicolas-hoffmann.net/modal/)).
- Attribute <code>data-modal-aria-modal</code>: adds attributes <code>aria-modal="true"</code> to the code of the modal.
- Attribute <code>data-modal-remove-role-dialog</code>: removes <code>role="dialog"</code> of the code of the modal.
- Attribute <code>data-modal-use-role-alertdialog</code>: instructs the modal to use <code>role="alertdialog"</code>.
- Attribute <code>data-modal-remove-dialog-tag</code>: instructs the modal to use <code>div</code> instead of using <code>dialog</code> tag.
If you need to close it, add `class="js-modal-close"` on an element in the modal content, it will trigger a click on close button.
Enjoy.

2
javascript/jquery-accessible-modal-window-aria/jquery-accessible-modal-window-aria.js

@ -55,7 +55,7 @@ jQuery(document).ready(function($) {
// insert code at the end
$modal_code = '<' + $modal_tag + ' ' + $modal_role_dialog + ' ' + $modal_role_alertdialog + ' id="js-modal" class="' + $modal_prefix_classes + 'modal" aria-labelledby="modal-title" open ' + $modal_aria + '><div role="document" class="' + $modal_prefix_classes + 'modal__wrapper">';
$modal_code += '<button type="button" id="js-modal-close" class="' + $modal_prefix_classes + 'modal-close" data-content-back-id="' + modal_content_id + '" data-focus-back="' + $modal_starter_id + '" title="' + $modal_close_title + '">';
$modal_code += '<button type="button" id="js-modal-close" class="' + $modal_prefix_classes + 'modal-close" data-content-back-id="back_' + modal_content_id + '" data-focus-back="' + $modal_starter_id + '" title="' + $modal_close_title + '">';
if ($modal_close_img !== '') {
$modal_code += '<img src="' + $modal_close_img + '" alt="' + $modal_close_text + '" class="' + $modal_prefix_classes + 'modal__closeimg" />';
} else {

Loading…
Cancel
Save