https://johnsplumbing.com/new-js/ada-popup.js

1/**
2 * ADA Notice Popup
3 * ----------------
4 * Drop this file into your global JS bundle (or include it in your footer).
5 * It requires jQuery to already be loaded on the page.
6 *
7 * Usage:
8 *   Add the trigger link anywhere in your HTML:
9 *   <a href="#" class="ada-notice-trigger">ADA Notice</a>
10 *
11 *   The popup HTML is injected once at runtime — no need to add it to every page.
12 */
13
14$(function () {
15
16  /* ── 1. Inject popup markup + styles once into <body> ── */
17  const popupHTML = `
18    <style>
19      #ada-overlay {
20        display: none;
21        position: fixed;
22        inset: 0;
23        background: rgba(0, 0, 0, 0.55);
24        z-index: 99998;
25        padding: 1rem;
26        overflow-y: auto;
27      }
28      #ada-overlay.ada-open { display: flex; align-items: center; justify-content: center; }
29
30      #ada-popup {
31        background: #fff;
32        border-radius: 8px;
33        box-shadow: 0 8px 40px rgba(0,0,0,0.22);
34        max-width: 620px;
35        width: 100%;
36        padding: 2.25rem 2.5rem 2rem;
37        position: relative;
38        font-family: inherit;
39        line-height: 1.65;
40        color: #222;
41      }
42
43      #ada-popup h2 {
44        margin: 0 0 1rem;
45        font-size: 1.25rem;
46        line-height: 1.35;
47        padding-right: 2rem;   /* room for close btn */
48        color: #111;
49      }
50
51      #ada-popup p {
52        margin: 0;
53        font-size: 0.9375rem;
54        color: #444;
55      }
56
57      #ada-popup a {
58        color: #0057b8;
59        text-decoration: underline;
60      }
61
62      #ada-popup-close {
63        position: absolute;
64        top: 1rem;
65        right: 1rem;
66        background: none;
67        border: none;
68        cursor: pointer;
69        padding: 0.25rem;
70        line-height: 1;
71        color: #666;
72        font-size: 1.5rem;
73      }
74      #ada-popup-close:hover { color: #000; }
75      #ada-popup-close:focus-visible {
76        outline: 2px solid #0057b8;
77        border-radius: 3px;
78      }
79    </style>
80
81    <div id="ada-overlay" role="dialog" aria-modal="true" aria-labelledby="ada-popup-heading">
82      <div id="ada-popup">
83        <button id="ada-popup-close" aria-label="Close ADA Notice">&times;</button>
84        <h2 id="ada-popup-heading">Americans with Disabilities Act (ADA) Notice</h2>
85        <p>
86          At Johns Plumbing, we are committed to ensuring that individuals with disabilities
87          enjoy full access to our websites. In recognition of this commitment, we are in the
88          process of making modifications to increase the accessibility and usability of this
89          website, using the relevant portions of the Web Content Accessibility Guidelines 2.0
90          (WCAG 2.0) as our standard. Please be aware that our efforts are ongoing. If at any
91          time you have difficulty using this website or with a particular web page or function
92          on this site, please contact us by phone at
93          <a href="tel:9549234184">(954) 923-4184</a>
94          or email us at
95          <a href="mailto:[email protected]">[email protected]</a>
96          and place "Web Content Accessibility (ADA)" in the subject heading and we will make
97          all reasonable efforts to assist you.
98        </p>
99      </div>
100    </div>
101  `;
102
103  $('body').append(popupHTML);
104
105  /* ── 2. Open popup ── */
106  $(document).on('click', '.ada-notice-trigger', function (e) {
107    e.preventDefault();
108    $('#ada-overlay').addClass('ada-open');
109    $('#ada-popup-close').trigger('focus');   // accessibility: move focus inside
110  });
111
112  /* ── 3. Close popup — button, overlay click, or Escape key ── */
113  $(document).on('click', '#ada-popup-close', closePopup);
114
115  $(document).on('click', '#ada-overlay', function (e) {
116    if ($(e.target).is('#ada-overlay')) closePopup();  // click on backdrop only
117  });
118
119  $(document).on('keydown', function (e) {
120    if (e.key === 'Escape') closePopup();
121  });
122
123  function closePopup() {
124    $('#ada-overlay').removeClass('ada-open');
125  }
126
127});