Title: Light Modal Block Author: David Jensen Published: Июнь 15, 2023-ж. Last modified: Февраль 22, 2026-ж. --- Плагиндерди издөө ![](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://kir.wordpress.org/plugins/light-modal-block/#description) * [Сын-пикирлер](https://kir.wordpress.org/plugins/light-modal-block/#reviews) * [Орнотуу](https://kir.wordpress.org/plugins/light-modal-block/#installation) * [Development](https://kir.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 * [[ * 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 ## Блоктор This plugin provides 1 block. * 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 ## FAQ.KG ### 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/) Февраль 27, 2026-ж. 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/) Ноябрь 7, 2025-ж. 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/) Сентябрь 2, 2025- ж. 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/) Август 22, 2025-ж. 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/) Июль 30, 2025-ж. 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/) Май 5, 2025-ж. 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. [ Read all 12 reviews ](https://wordpress.org/support/plugin/light-modal-block/reviews/) ## Contributors & Developers “Light Modal Block” is open source software. The following people have contributed to this plugin. Мүчөлөрү * [ David Jensen ](https://profiles.wordpress.org/dkjensen/) * [ CloudCatch ](https://profiles.wordpress.org/cloudcatch/) [Translate “Light Modal Block” into your language.](https://translate.wordpress.org/projects/wp-plugins/light-modal-block) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/light-modal-block/), check out the [SVN repository](https://plugins.svn.wordpress.org/light-modal-block/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/light-modal-block/) by [RSS](https://plugins.trac.wordpress.org/log/light-modal-block/?limit=100&mode=stop_on_copy&format=rss). ## Өзгөртүүлөр #### 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** * Акыркы жаңыртуу **2 ай мурун** * Активдүү орнотуулар **2,000+** * WordPress нускасы ** 6.6 же андан жогору ** * Tested up to **6.9.4** * PHP нускасы ** 7.0 же андан жогору ** * Тил * [English (US)](https://wordpress.org/plugins/light-modal-block/) * Тег: * [block](https://kir.wordpress.org/plugins/tags/block/)[gutenberg](https://kir.wordpress.org/plugins/tags/gutenberg/) [lightbox](https://kir.wordpress.org/plugins/tags/lightbox/)[modal](https://kir.wordpress.org/plugins/tags/modal/) [popup](https://kir.wordpress.org/plugins/tags/popup/) * [Advanced View](https://kir.wordpress.org/plugins/light-modal-block/advanced/) ## Рейтинг 5 out of 5 stars. * [ 12 5-star reviews ](https://wordpress.org/support/plugin/light-modal-block/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/light-modal-block/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/light-modal-block/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/light-modal-block/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/light-modal-block/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/light-modal-block/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/light-modal-block/reviews/) ## Мүчөлөрү * [ David Jensen ](https://profiles.wordpress.org/dkjensen/) * [ CloudCatch ](https://profiles.wordpress.org/cloudcatch/) ## Колдоо Issues resolved in last two months: 2 out of 2 [Колдоо форумун көрүү](https://wordpress.org/support/plugin/light-modal-block/) ## Кайрымдуулук Would you like to support the advancement of this plugin? [ Кайрымдуулук кылуу ](https://www.buymeacoffee.com/dkjensen)