humanmade/hm-popup-block

An popup and tooltip dialog block utility, multiple trigger options, and supports anchor placements

Package info

github.com/humanmade/hm-popup-block

Language:JavaScript

Type:wordpress-plugin

pkg:composer/humanmade/hm-popup-block

Statistics

Installs: 326

Dependents: 0

Suggesters: 0

Stars: 14

Open Issues: 5

0.6.0 2026-05-27 11:25 UTC

Requires

Requires (Dev)

None

Suggests

None

Provides

None

Conflicts

None

Replaces

GPL-2.0-or-later c1d27bbac9a3cb09d67db1bedfc19c5b392dd150

  • Human Made Limited <engineering.woop@humanmade.com>

README

A lightweight, modern popup block for WordPress that displays any content as a modal dialog.

Features

Trigger Modes

  • Click trigger - Open popup from any link or button by setting the URL to #your-popup-id
  • Exit intent - Automatically show popup when user moves cursor to leave the page

Display Styles

  • Centered modal - Default full-screen overlay with centered content
  • Left sidebar - Slide-in panel from the left edge
  • Right sidebar - Slide-in panel from the right edge

Anchor Positioning

Position popups relative to their trigger button using CSS anchor positioning:

  • Bottom / Bottom Start / Bottom End
  • Top / Top Start / Top End
  • Left / Left Start / Left End
  • Right / Right Start / Right End

Anchored popups automatically reposition when they would overflow the viewport.

Styling Options

  • Customizable backdrop opacity (0-100%)
  • Backdrop background color support
  • Backdrop background image support
  • Full layout controls for popup content width

Accessibility

  • Built on native HTML <dialog> element
  • Keyboard accessible (Escape to close)
  • Click backdrop to close
  • Add close buttons with #close URL

Usage

  1. Add a Popup Block to your page
  2. Set an anchor/ID for the popup (e.g., my-popup)
  3. Add your content inside the popup
  4. Create a button or link with URL #my-popup to trigger it

Exit Intent Popup

  1. Add a Popup Block and set trigger to "On exit intent"
  2. Configure cookie expiration (days before showing again)
  3. The popup will appear when users move to leave the page

Anchored Popup

  1. Add a Popup Block with click trigger
  2. Enable "Use Anchoring" in block settings
  3. Select anchor position (bottom, top, left, right, etc.)
  4. The popup will appear attached to the trigger button

Requirements

  • WordPress 6.1+
  • PHP 7.0+

License

GPL-2.0-or-later