Title: Light Modal Block Author: David Jensen Published: 2023 年 6 月 15 日 Last modified: 2026 年 2 月 22 日 --- 搜索插件 ![](https://ps.w.org/light-modal-block/assets/banner-772x250.png?rev=2927128) ![](https://ps.w.org/light-modal-block/assets/icon.svg?rev=3399001) # Light Modal Block 作者：[David Jensen](https://profiles.wordpress.org/dkjensen/) [下载](https://downloads.wordpress.org/plugin/light-modal-block.1.9.0.zip) * [详情](https://cn.wordpress.org/plugins/light-modal-block/#description) * [评价](https://cn.wordpress.org/plugins/light-modal-block/#reviews) * [安装](https://cn.wordpress.org/plugins/light-modal-block/#installation) * [开发进展](https://cn.wordpress.org/plugins/light-modal-block/#developers) [支持](https://wordpress.org/support/plugin/light-modal-block/) ## 描述 A simple yet robust solution for creating modals within the WordPress block editor. 🚀 [View Demo](https://light-modal-block.cloudcatch.io/) ### 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](https://github.com/Ghosh/micromodal) library. ## 屏幕截图 [⌊Block editor modal settings⌉⌊Block editor modal settings⌉[ Block editor modal settings [⌊Show Modal block control enabled under the Advanced panel for various blocks⌉⌊ Show Modal block control enabled under the Advanced panel for various blocks⌉[ Show Modal block control enabled under the Advanced panel for various blocks [⌊Native block styling enabled for modals⌉⌊Native block styling enabled for modals⌉[ Native block styling enabled for modals [⌊Custom panel reveals all modals enabled on page⌉⌊Custom panel reveals all modals enabled on page⌉[ Custom panel reveals all modals enabled on page [⌊Modal in list view⌉⌊Modal in list view⌉[ 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 `` of the page when a modal is open. You can use the following CSS to prevent scrolling ``` .lmb-open { overflow: hidden; } ``` ## 评价 ![](https://secure.gravatar.com/avatar/f636af3585dd3a626e5e9c8a094e04990fad931a5bb26232be0060d92a04ae9a? s=60&d=retro&r=g) ### 󠀁[A simple and lightweight plugin](https://wordpress.org/support/topic/a-simple-and-lightweight-plugin/)󠁿 [darkonelson](https://profiles.wordpress.org/darkonelson/) 2026 年 2 月 27 日 It does everything it needs to and is easy to define. I recommend. ![](https://secure.gravatar.com/avatar/20f0b7b78120984216b2d39c88bca82bfeb8d9e264a652fa6c186a560cebe7e4? s=60&d=retro&r=g) ### 󠀁[So much better than everything else I’ve tried](https://wordpress.org/support/topic/so-much-better-than-everything-else-ive-tried/)󠁿 [espointpolish](https://profiles.wordpress.org/espointpolish/) 2025 年 11 月 7 日 Beautiful plugin and amazing support! Thank you. ![](https://secure.gravatar.com/avatar/dc4537c616e5a70db3933301c9cada1b538625282da279c54b4a07bb53d55e1c? s=60&d=retro&r=g) ### 󠀁[Lightweight using with blocks](https://wordpress.org/support/topic/lightweight-using-with-blocks/)󠁿 [Caio Ferreira](https://profiles.wordpress.org/caiohferreiradev/) 2025 年 9 月 2 日 Love this! So lightweight and works perfectly with Gutenberg/GenerateBlocks. Thanks and keep up the good work! ![](https://secure.gravatar.com/avatar/b6183ef433f9b9244634e0d3f38e8eff7052cf77358d871c24d3b7cf6e07cd14? s=60&d=retro&r=g) ### 󠀁[A great addition to the block editor](https://wordpress.org/support/topic/a-great-addition-to-the-block-editor/)󠁿 [stlpl](https://profiles.wordpress.org/stlpl/) 2025 年 8 月 22 日 It’s a simple and elegant solution without unnecessary frills. ![](https://secure.gravatar.com/avatar/838271affb723358ccf0d96c4efea84e7a29e43556e65d340cdbf1d22edfffce? s=60&d=retro&r=g) ### 󠀁[This should be a default gutenberg block](https://wordpress.org/support/topic/this-should-be-a-default-gutenberg-block/)󠁿 [Radical Dreamer](https://profiles.wordpress.org/avagp/) 2025 年 7 月 30 日 It is so useful~! it solves too many scenarios: pop-forms, subscriptions, menu, additional info, and the list goes on… ![](https://secure.gravatar.com/avatar/5a40408a4cdbcd52ebe9529d5cd5b391dd489c541c2a7be1104e7b05a68704eb? s=60&d=retro&r=g) ### 󠀁[The plugin is great, simple and easy to use.](https://wordpress.org/support/topic/the-plugin-is-great-simple-and-easy-to-use/)󠁿 [tamnik](https://profiles.wordpress.org/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. [ 阅读所有12条评价 ](https://wordpress.org/support/plugin/light-modal-block/reviews/) ## 贡献者及开发者「Light Modal Block」是开源软件。以下人员对此插件做出了贡献。贡献者 * [ David Jensen ](https://profiles.wordpress.org/dkjensen/) * [ CloudCatch ](https://profiles.wordpress.org/cloudcatch/) [帮助将「Light Modal Block」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/light-modal-block) ### 对开发感兴趣吗? 您可以[浏览代码](https://plugins.trac.wordpress.org/browser/light-modal-block/)，查看[SVN仓库](https://plugins.svn.wordpress.org/light-modal-block/)，或通过[RSS](https://plugins.trac.wordpress.org/log/light-modal-block/?limit=100&mode=stop_on_copy&format=rss) 订阅[开发日志](https://plugins.trac.wordpress.org/log/light-modal-block/)。 ## 更新日志 #### 1.9.0 * Enhancement: When selecting edit modal from the plugin sidebar, automatically open the modal block settings * Enhancement: Improve performance of `useModals()` hook via leveraging `getBlocksByName()` #### 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 ## 额外信息 * 版本 **1.9.0** * 最后更新：**4 月前** * 活跃安装数量 **2,000+** * WordPress 版本 ** 6.6 或更高版本 ** * 已测试的最高版本为 **6.9.4** * PHP 版本 ** 7.0 或更高版本 ** * 语言 * [English (US)](https://wordpress.org/plugins/light-modal-block/) * 标签 * [block](https://cn.wordpress.org/plugins/tags/block/)[gutenberg](https://cn.wordpress.org/plugins/tags/gutenberg/) [lightbox](https://cn.wordpress.org/plugins/tags/lightbox/)[modal](https://cn.wordpress.org/plugins/tags/modal/) [popup](https://cn.wordpress.org/plugins/tags/popup/) * [高级视图](https://cn.wordpress.org/plugins/light-modal-block/advanced/) ## 评级 5 星（最高 5 星）。 * [ 12 条 5 星评价 ](https://wordpress.org/support/plugin/light-modal-block/reviews/?filter=5) * [ 0 条 4 星评价 ](https://wordpress.org/support/plugin/light-modal-block/reviews/?filter=4) * [ 0 条 3 星评价 ](https://wordpress.org/support/plugin/light-modal-block/reviews/?filter=3) * [ 0 条 2 星评价 ](https://wordpress.org/support/plugin/light-modal-block/reviews/?filter=2) * [ 0 条 1 星评价 ](https://wordpress.org/support/plugin/light-modal-block/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/light-modal-block/reviews/#new-post) [查看全部评论](https://wordpress.org/support/plugin/light-modal-block/reviews/) ## 贡献者 * [ David Jensen ](https://profiles.wordpress.org/dkjensen/) * [ CloudCatch ](https://profiles.wordpress.org/cloudcatch/) ## 支持最近两个月解决的问题：总计 3，已解决 1 [查看支持论坛](https://wordpress.org/support/plugin/light-modal-block/) ## 捐助您愿意支持这个插件的发展吗? [ 捐助此插件 ](https://www.buymeacoffee.com/dkjensen)