説明

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
- Option for user interaction within modal triggers cookie to be set
Custom modal width
Optional close button
API enabled
Only 2kb gzipped
Accessibility enabled
Use modals within the query loop block

Attribution

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

スクリーンショット

Block editor modal settings
Show Modal block control enabled under the Advanced panel for various blocks
Native block styling enabled for modals
Custom panel reveals all modals enabled on page
Modal in list view

ブロック

このプラグインは1個のブロックを提供します。

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

インストール

Upload the plugin files to the /wp-content/plugins/light-modal-block directory, or install the plugin through the WordPress plugins screen directly.
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();

How can I prevent focusing on the first focusable element when the modal opens?

Paste the following code in your child themes functions.php file or similar:

/**
* Prevents the light modal block from focusing on a specific element when it opens.
*
* @return void
*/
add_action(
    'wp_enqueue_scripts',
    function () {
        wp_add_inline_script(
            'cloudcatch-light-modal-block-view-script',
            'window.lmbFocusableElements = "";',
            'before'
        );
    }
);

How can I prevent scrolling when a modal is open?

The class lmb-open is added to the <body> of the page when a modal is open. You can use the following CSS to prevent scrolling

.lmb-open {
    overflow: hidden;
}

評価

tamnik 2025年5月5日

A small suggestion, if you add additional options, like height, a custom additional classes for each separate popup__wrapper – justify /align content and even breaking points, this plugin could be used for much more like Floating Search or Mobile Navigation etc.

jason kickmouth 2025年2月16日

That this superlightweight plugin now works with query loops and repeaters is a gamechanger.If you need a modal plugin – it’s this one!

Jacques-Alexandre Hallé 2024年12月3日

Light weight. Works well. Added to favorites.

Randy Baum 2024年11月22日 1 reply

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

ChisNghiaxyz 2024年9月13日

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

ws24 2024年8月13日

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.

7件のレビューをすべて表示

貢献者と開発者

Light Modal Block はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

“Light Modal Block” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログを RSS で購読してみてください。

変更履歴

1.6.0

Enhancement: Add event listeners for modal ready, open and close

1.5.0

Enhancement: Add body class .lmb-open when a modal is currently open on the page
Enhancement: Add ability to set cookie on timed modals when user interacts with content in the modal
Enhancement: Close icon / close background color controls
Enhancement: Add ability to change/remove focusable elements when a modal is opened
Chore: Update block to block version 3
Chore: Update minimum WordPress version support to 6.6

1.4.0

Enhancement: Support for modals within a query loop block

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

The plugin is great, simple and easy to use.

Amazing just got better!

Works fine

Fantastic Modal Plugin!

Nice and Wonderful

Great plugin for just a simple modal

説明