WordPress.org

China 简体中文

获取 WordPress
WordPress.org

Plugin Directory

Light Modal Block

Light Modal Block

作者：David Jensen
下载

描述

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

安装

  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

常见问题

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;
}

评价

The plugin is great, simple and easy to use.

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.

Amazing just got better!

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!
阅读所有11条评价

贡献者及开发者

「Light Modal Block」是开源软件。 以下人员对此插件做出了贡献。

贡献者

帮助将「Light Modal Block」翻译成简体中文。

对开发感兴趣吗?

您可以浏览代码，查看SVN仓库，或通过RSS订阅开发日志。

更新日志

1.8.0

  • Fix: Show modal on page load no longer requiring delay input
  • Enhancement: Control over autoplaying of videos and audio when a modal opens as well as pausing when it closes

1.7.1

  • Fix: Unnecessary block editor scripts being enqueued on frontend

1.7.0

  • Enhancement: Improve acessibility of modal triggers for the Button block

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

额外信息

评级

5 星（最高 5 星）。

添加我的评价

查看全部评论

支持

有话要说吗？是否需要帮助？

查看支持论坛

捐助

您愿意支持这个插件的发展吗?

捐助此插件