top-modal
A simple, top-of-page modal built as a Web Component
Demo
Installation
You can integrate top-modal via <script> tag or via NPM.
Via <script> tag
In the <head> of your index.html put a script tag like this:
Now you can use the top-modal element anywhere in your html, JSX, template, etc.
Via NPM
npm install top-modal --saveAnd then you need to import the module before you can use it in your html/jsx/template:
;Web Component Browser Support
This web component uses HTML templates, the shadow DOM, and custom elements. If you need to polyfill for any of these standards then take a look at the web components polyfill.
API and Customization
Attributes/Properties
open- Add this attribute to open the modal.
- Example:
<top-modal open></top-modal>
- Example:
- Set the property in Javascript to imperatively toggle the modal
- Example:
modal.open = true
- Example:
- In (p)react you might need to set undefined in your JSX (since false !== undefined for html attribute existence)
- Example:
<top-modal open={this.state.isModalOpen || undefined}></top-modal>
- Example:
- Add this attribute to open the modal.
Events
open- Raised when the modal is opened.
- Example:
modal.addEventListener("open", handleOpen()) - When subscribing in html listen for
onopen- Ex:
<top-modal onopen="handleOpen()">
- Ex:
close-Raised when the modal is closed.- Example:
modal.addEventListener("close", handleClose()) - When subscribing in html listen for
onclose- Ex:
<top-modal onclose="handleClose()">
- Ex:
- Example:
Styling
You can style the top-modal element as you would any regular element, in CSS. A list of supported CSS properties are below, along with the default values.
You can set a backdrop filter using the following CSS variable.
--top-modal-backdrop-filter- Sets the backdrop-filter for both the modal and the overlay that appears to the bottom of the modal (when it's open).
- Default is
none
You can customize the overlay that appears to the bottom of the modal (when it's open) by setting one of the following CSS variables.
--top-modal-overlay-transition- Sets the transition
- Default is
opacity 0.25s ease-in-out 0.25s
--top-modal-overlay-opacity- Sets the opacity of the overlay
- Default is
0.7
Contribute
This project is built with standard HTML/CSS/TS, no frameworks or special web-component compilers here (for maximum simplicity and minimum size). If you want to learn more about writing custom elements see MDN or this web fundamentals page.
npm installnpm startThis will start a live-server on port localhost:8080. Any changes you make to files in lib/ or any changes to example/index.html should get live reloaded.