Light Modal Block

Description

A simple yet robust solution for creating modals within the WordPress block editor.

?? View Demo

Features

• Fully customizable using the native block editor style controls
• Trigger modal on click for any element via CSS selector
• Trigger modal on page load after X milliseconds
  • Set cookie to not show modal again on page load until X minutes have elapsed
• Custom modal width
• Optional close button
• API enabled
• Only 2kb gzipped
• Accessibility enabled

Attribution

The Light Modal block uses a modified version of the Micromodal library.

Screenshots

Blocks

This plugin provides 1 block.

• Light Modal Block Lightweight, customizable modal block for the WordPress block editor

Installation

1. Upload the plugin files to the /wp-content/plugins/light-modal-block directory, or install the plugin through the WordPress plugins screen directly.
2. Activate the plugin through the ‘Plugins’ screen in WordPress

FAQ

How can I programatically open or close a modal?

Each modal is given a unique ID, which can be found inside the inspector controls of the block settings. It will look something like: Mk6I8L4haJB

To open a modal:

window.lightModalBlocks.get('modal-id-here').showModal(true);

To close a modal:

window.lightModalBlocks.get('modal-id-here').closeModal();

Reviews

Fantastic Modal Plugin!

Randy Baum November 22, 2024

This has become my go-to solution for modals. Works seamlessly along with GeneratePress/GenerateBlocks. Thank you for your time developing this.

Nice and Wonderful

ChisNghiaxyz September 13, 2024

Plugin Works well, simple, light, functional enough to use. Cheers

Great plugin for just a simple modal

ws24 August 13, 2024

Many modal/pop-up plugins are just too heavy and complicated. This plugin is light and works simple. I had to find out a bit how it works exactly adding the modal with a css selector (maybe add a screenshot of this step?). The result looks good and works fine! Thanks.

Simply beautiful, and beautifully simple!

Jakson August 1, 2024 1 reply

Completely down a rabbit hole on the WP Plugin Repo and came across this plugin that was so perfect, it shocked me! Simple to use and a great UX, and so unbelievably light weight too, it is insane – like it only adds about 5k to your page! (before the the content you add to it) It’s an absolute no brainer for me now, any time I need a popup in a Block Theme – thank you CloudCatch and David Jensen!

Contributors & Developers

Changelog

1.3.2

• Fix: Unique modal ID not generating when duplicating block

1.3.1

• Fix: When editing a pattern with a modal block, open modal by default

1.3.0

• Enhancement: Add support for drop shadows

1.2.1

• Fix: Modal blocks not showing in sidebar or advanced controls if a nested block

1.2.0

• Enhancement: Add typography style controls

1.1.1

• Fix: Block editor toolbar crash

1.1.0

• Fix: Add backdrop color control
• Enhancement: Set cookie to not display modal again until X minutes have elapsed
• Enhancement: API to programatically open and close modal

1.0.1

• Fix: Update CSS styling

1.0.0

• Initial release