Back to Modal-guidelines
JavaScriptThe latest version of this package is: 0.18.6, 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.18.6
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>
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
0.17.0 (2021-10-21)
Code Refactoring
- 💡 Remove support for CommonJS (9f84d9a)
BREAKING CHANGES
- 🧨 We have removed the support for CommonJS for all @ids-js packages
0.16.1 (2021-10-21)
Bug Fixes
- Use common for cjs and main for esm (96f673d)