https://github.com/nathansmith/cta-modal
Call to action modal, as a Web Component
https://github.com/nathansmith/cta-modal
a11y accessibility aria-modal modal webcomponent webcomponents
Last synced: 10 months ago
JSON representation
Call to action modal, as a Web Component
- Host: GitHub
- URL: https://github.com/nathansmith/cta-modal
- Owner: nathansmith
- License: mit
- Created: 2022-01-29T16:28:03.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-03-23T21:04:54.000Z (almost 3 years ago)
- Last Synced: 2025-04-12T02:05:53.563Z (10 months ago)
- Topics: a11y, accessibility, aria-modal, modal, webcomponent, webcomponents
- Language: TypeScript
- Homepage: https://host.sonspring.com/cta-modal
- Size: 508 KB
- Stars: 56
- Watchers: 3
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CTA Modal 🦒
CTA Modal is a self-contained call to action [ARIA modal](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html), built as a [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components). It has zero runtime dependencies beyond a single JavaScript file, and only requires authoring HTML to use.
- To see it in action, check out the [demo page](https://host.sonspring.com/cta-modal/).
- All the TypeScript code is well tested, with 💯 [coverage](https://host.sonspring.com/cta-modal/coverage/cta-modal.ts.html).
- The compiled [cta-modal.js](https://host.sonspring.com/cta-modal/dist/cta-modal.js) file is less than **8** kilobytes.
- You can view the source code on [GitHub](https://github.com/nathansmith/cta-modal).
- This [article](https://www.smashingmagazine.com/2022/04/cta-modal-build-web-component/) explains how it was built.
---
## How to use: install
If you are using [Node](https://nodejs.org/en/) with [NPM](https://www.npmjs.com/) (or [Yarn](https://yarnpkg.com/)) the install would look something like this.
```bash
# NPM.
npm install cta-modal
```
```bash
# Yarn.
yarn add cta-modal
```
Then simply import it into your own `*.js` or `*.ts` file.
```javascript
// Node.
require('cta-modal');
```
```javascript
// ES6.
import 'cta-modal';
```
---
## How to use: flat file
If you are building a site where you want to include CTA Modal directly, then download the [cta-modal.js](https://host.sonspring.com/cta-modal/dist/cta-modal.js) file and reference it within your own `*.html` file.
```html
```
**Note:** Alternatively, you can put the `script` at the end of your page, before the closing `