Focus Traps - Modal Cookie Banner Example

by tohuwabohu_io

HTML

<body>
    <div id="modal-window" class="cookie-overlay modal">
        <div class="cookie-popup">
            <div class="cookie-info-container">
                <h2>Cookies 🍪</h2>
                <p>
                    Very important information regarding whom you will sell your soul to.
                </p>
                <p>
                    Allow or Prohibit:
                </p>
                <div class="cookie-selection-controls">
                    <input id="technical" type="checkbox" checked>
                    <label for="technical">Technical Cookies</label>
                    <input id="analytical" type="checkbox" checked>
                    <label for="analytical">Analytical Cookies</label>
                    <input id="thirdParty" type="checkbox" checked>
                    <label for="thirdParty">3rd Party Cookies</label>
                </div>
            </div>
            <div class="cookie-button-container">
                <button onclick="toggleOverlay(true)">
                    Accept
                </button>
                <button onclick="toggleOverlay(true)">
                    Decline
                </button>
            </div>
        </div>
    </div>
    <main>
        <section>
            <h1>Very cool website that needs cookies</h1>
            <p>
                Our quality content mainly consists of cats in various poses.
            </p>
            <a href="#">Here is a link that would get focused if the focus trap would not exist.</a>
            <p>
                Also dogs that sniff each other's butts are seen here.
            </p>
            <a href="#">Here is another link that would get focused if the focus trap would not exist.</a>
            <p>
                Have you ever watched a cockatoo solving a Rubik's cube? We neither.
            </p>
            <a href="#">Here is yet another link that would get focused if the focus trap would not exist.</a>
        </section>

        <section>
    ...

CSS

.cookie-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.70);
  display: none;
}

.modal {
  display: flex;
  align-items: center;
}

.cookie-popup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  border-radius: 10px;
  border: 1px solid black;
  padding: 1em;
  margin: auto;
  gap: 1em;
  max-width: 500px;
  background-color: #fff;
}

.cookie-selection-controls {
  display: grid;
  grid-template-columns: 2em auto;
  gap: 1em;
}

.cookie-button-container {
  display: flex;
  flex-direction: row;
  gap: 1em;
}

.form-grid {
  display: grid;
  grid-template-columns: auto auto;
  max-width: 600px;
  gap: 1em;
}

.form-submit {
  margin: 1em;
}

JavaScript

const toggleOverlay = (hide) => {
  const overlay = document.querySelector('div[id=modal-window]');

  if (hide === true) {
    overlay.setAttribute('aria-hidden', 'true');

    overlay.classList.remove('modal');
  } else {
    overlay.setAttribute('aria-hidden', 'false');

    overlay.classList.add('modal');
  }
}