Add class="js-modal-close" (on any element) to trigger close button …

…modal
nico3333fr · Dec 23, 2017 · c2585cb · c2585cb
1 parent 7e5d7b9
commit c2585cb
Show file tree

Hide file tree

Showing 9 changed files with 13 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -48,6 +48,8 @@ First, put <code>class="js-modal"</code> on a button or a link to activate the s
 - 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.
 
+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.
+
 Remember there are some demos, it will be easier to understand: <a href="https://van11y.net/downloads/modal/demo/index.html">Demo of accessible modal window</a>
 
 The script is launched when the page is loaded. If you need to execute it on AJAX-inserted content, you may use for example on `<div id="newContent">your modal launcher source</div>`:

diff --git a/bower.json b/bower.json
@@ -3,7 +3,7 @@
   "description": "ES2015 accessible modal window system, using ARIA (compatible IE9+ when transpiled)",
   "homepage": "https://van11y.net/accessible-modal/",
   "main": "van11y-accessible-modal-window-aria.es6.js",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "keywords": [
     "Accessibility",
     "ARIA",

diff --git a/demo/index-fr.html b/demo/index-fr.html
@@ -58,6 +58,7 @@ <h1 class="aligncenter">Démo&#160;: fenêtre modale accessible utilisant <abbr
   <div id="informations_other" class="hidden">
      <p>C’est si facile.</p>
      <p>Styler des composants de modale peut être fait pour des sites responsive (essayez de redimensionner).</p>
+     <p><button class="js-modal-close button">Un button pour fermer</button></p>
     </div>
 
 

diff --git a/demo/index.html b/demo/index.html
@@ -58,6 +58,7 @@ <h1 class="aligncenter">Demo: accessible modal window using <abbr title="Accessi
   <div id="informations_other" class="hidden">
      <p>It’s so easy.</p>
      <p>Styling modal components can be made for responsive websites (try to resize).</p>
+     <p><button class="js-modal-close button">A button to close it</button></p>
     </div>
 
 

diff --git a/dist/van11y-accessible-modal-window-aria.es6.js b/dist/van11y-accessible-modal-window-aria.es6.js
@@ -316,7 +316,8 @@
                 if (
                     (
                         e.target.getAttribute('id') === MODAL_BUTTON_JS_ID || parentButton !== '' ||
-                        e.target.getAttribute('id') === MODAL_OVERLAY_ID
+                        e.target.getAttribute('id') === MODAL_OVERLAY_ID ||
+                        hasClass(e.target, MODAL_BUTTON_JS_CLASS) === true
                     ) &&
                     eventName === 'click'
                 ) {

diff --git a/dist/van11y-accessible-modal-window-aria.js b/dist/van11y-accessible-modal-window-aria.js
@@ -274,7 +274,7 @@
 
             // click on close button or on overlay not blocked
             var parentButton = searchParent(e.target, MODAL_BUTTON_JS_CLASS);
-            if ((e.target.getAttribute('id') === MODAL_BUTTON_JS_ID || parentButton !== '' || e.target.getAttribute('id') === MODAL_OVERLAY_ID) && eventName === 'click') {
+            if ((e.target.getAttribute('id') === MODAL_BUTTON_JS_ID || parentButton !== '' || e.target.getAttribute('id') === MODAL_OVERLAY_ID || hasClass(e.target, MODAL_BUTTON_JS_CLASS) === true) && eventName === 'click') {
                 var body = doc.querySelector('body');
                 var wrapperBody = findById(WRAPPER_PAGE_JS);
                 var modal = findById(MODAL_JS_ID);

diff --git a/dist/van11y-accessible-modal-window-aria.min.js b/dist/van11y-accessible-modal-window-aria.min.js
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "name": "van11y-accessible-modal-window-aria",
   "description": "ES2015 accessible modal window system, using ARIA (compatible IE9+ when transpiled)",
   "main": "dist/van11y-accessible-modal-window-aria.min.js",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "keywords": [
     "Accessibility",
     "ARIA",

diff --git a/src/van11y-accessible-modal-window-aria.es6.js b/src/van11y-accessible-modal-window-aria.es6.js
@@ -316,7 +316,8 @@
                 if (
                     (
                         e.target.getAttribute('id') === MODAL_BUTTON_JS_ID || parentButton !== '' ||
-                        e.target.getAttribute('id') === MODAL_OVERLAY_ID
+                        e.target.getAttribute('id') === MODAL_OVERLAY_ID ||
+                        hasClass(e.target, MODAL_BUTTON_JS_CLASS) === true
                     ) &&
                     eventName === 'click'
                 ) {