npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

top-modal

v0.0.2

Published

A simple, top-of-page modal built as a Web Component

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

wes566wes566

Keywords

web componentmodalanimatingweb-component

Readme

Build Published on webcomponents.org npm Dependencies Status

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:

<script type="module" src="https://cdn.skypack.dev/top-modal"></script>

Now you can use the top-modal element anywhere in your html, JSX, template, etc.

Via NPM

npm install top-modal --save

And then you need to import the module before you can use it in your html/jsx/template:

import "top-modal";

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>
    • Set the property in Javascript to imperatively toggle the modal
      • Example: modal.open = true
    • 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>

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()">
  • close -Raised when the modal is closed.
    • Example: modal.addEventListener("close", handleClose())
    • When subscribing in html listen for onclose
      • Ex: <top-modal onclose="handleClose()">

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.

top-modal {
  background-color: #ffffff;
  color: inherit;
  width: 100vw;
  max-width: 800px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

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 install
npm start

This 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.