Back to Modal-guidelines

JavaScriptThe latest version of this package is: 0.17.4, Opens in new window

JavaScript library for the Modal Component

This component is compatible with ESM (ES6 module) and IIFE. See documentation examples below.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-js/modal@0.17.4

Table of Contents

Usage

Required markup

<button aria-label="Open modal" id="openModal" type="button" class="if button">
  Open modal
</button>
<div class="if backdrop"></div>
<div
  aria-modal="true"
  role="dialog"
  aria-labelledby="modal-title"
  aria-describedby="modal-description"
  class="if modal"
>
  <div class="if title" id="modal-title">
    Title<button
      type="button"
      class="if close"
      aria-label="Close modal"
    ></button>
  </div>
  <span class="if axe sr-only" id="modal-description"
    >This is a modal that..</span
  >
  <div class="if content">
    <p class="if">
      Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates
      don’t eat the tourists. God creates dinosaurs. God destroys dinosaurs. God
      creates Man. Man destroys God. Man creates Dinosaurs. What do they got in
      there? King Kong? Forget the fat lady! You're obsessed with the fat lady!
      Drive us out of here!
    </p>

    <p class="if">
      Hey, you know how I'm, like, always trying to save the planet? Here's my
      chance. They're using our own satellites against us. And the clock is
      ticking. God help us, we're in the hands of engineers. They're using our
      own satellites against us. And the clock is ticking.
    </p>
    <a
      class="if external-link"
      target="_blank"
      rel="noopener noreferrer"
      href="https://google.com"
      >An external link</a
    >
    <a
      class="if external-link"
      target="_blank"
      rel="noopener noreferrer"
      href="https://google.com"
      >An external link</a
    >
  </div>
</div>

You can initialize a Modal:

<script src="/assets/modal.iife.js"></script>
<script>
  const trigger = document.getElementById('openModal');
  const backdrop = document.querySelector('.if.backdrop');
  const modal = document.querySelector('.if.modal');
  const modalInstance = new IDSModal.Modal({ trigger, backdrop, modal });
</script>
Contact us, Opens in new window