https://github.com/substrate-system/modal

Modal window web component
https://github.com/substrate-system/modal

Last synced: 10 months ago
JSON representation

Modal window web component

• Host: GitHub
• URL: https://github.com/substrate-system/modal
• Owner: substrate-system
• License: other
• Created: 2024-06-25T22:15:49.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2025-05-09T00:58:45.000Z (about 1 year ago)
• Last Synced: 2025-05-16T08:09:24.818Z (about 1 year ago)
• Language: TypeScript
• Homepage: https://substrate-system.github.io/modal/
• Size: 52.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# modal

![tests](https://github.com/nichoth/modal/actions/workflows/nodejs.yml/badge.svg)

[![types](https://img.shields.io/npm/types/@nichoth/modal?style=flat-square)](README.md)

[![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)

[![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver&style=flat-square)](https://semver.org/)

[![dependencies](https://img.shields.io/badge/dependencies-zero-brightgreen.svg?style=flat-square)](package.json)

[![license](https://img.shields.io/badge/license-Polyform_Non_Commercial-26bc71?style=flat-square)](LICENSE)

Modal dialog window

See [smashingmagazine.com article](https://www.smashingmagazine.com/2022/04/cta-modal-build-web-component/) and [nathansmith/cta-modal](https://github.com/nathansmith/cta-modal/tree/main).

## demo

See [nichoth.github.io/modal](https://nichoth.github.io/modal/).

## install

```sh

npm i -S @nichoth/modal

```

## use

### bundler

Just import; this calls the global function `window.customElements.define`.

```js

import '@nichoth/modal'

```

Then use the tag in HTML:

```html

    


        


            

                Open modal

            

        

    


    
modal content?

    
more modal content


```

### HTML only

First copy the file to a location accessible to your web server.

```sh

cp ./node_modules/@nichoth/modal/dist/index.min.js ./public/modal.js

```

Then link to the file in HTML

```html

    
...content...

    


```

## API

### attributes

See [nathansmith/cta-modal](https://github.com/nathansmith/cta-modal/tree/main?tab=readme-ov-file#how-to-use-extras)

#### Plus

##### closable

Take an attribute `closable`. If you pass in `closable="false"`, then it will

render without a 'close' button, and escape key and clicks will not close the

modal. You would need to open/close it via your application state.

```html

    


        


            

                Open a modal that can't be closed

            

        

    

    
modal content?

    
more modal content


```

## example

[See `./example`](./example/).

## credits

Thanks [@nathansmith](https://github.com/nathansmith) and [Smashing Magazine](https://www.smashingmagazine.com/2022/04/cta-modal-build-web-component/) for publishing this originally.