الوصف
A simple yet robust solution for creating modals within the WordPress block editor.
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-blockdirectory, or install the plugin through the WordPress plugins screen directly. - 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:
Mk6I8L4haJBTo 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-openis 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; }
المراجعات
16 مارس، 2025
A small suggestion, if you add additional options, like height, a custom additional CSS class for each separate popup__wrapper – justify content/align content left, right, top or down in each separate popup__wrapper – and even breaking points, this plugin could be used for much more like Floating Search or Mobile Navigation etc.
16 فبراير، 2025
That this superlightweight plugin now works with query loops and repeaters is a gamechanger.If you need a modal plugin – it’s this one!
3 ديسمبر، 2024
Light weight. Works well. Added to favorites.
22 نوفمبر، 2024
1 reply
This has become my go-to solution for modals. Works seamlessly along with GeneratePress/GenerateBlocks. Thank you for your time developing this.
13 سبتمبر، 2024
Plugin Works well, simple, light, functional enough to use. Cheers
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.
المساهمون والمطوّرون
“Light Modal Block” هو برنامج مفتوح المصدر. وقد ساهم هؤلاء الأشخاص بالأسفل في هذه الإضافة.
المساهمون
ترجمة ”Light Modal Block“ إلى لغتك.
مُهتم بالتطوير؟
تصفّح الشفرة، تحقق من مستودع SVN، أو الاشتراك في سجل التطوير بواسطة RSS.
سجل التغييرات
1.5.0
- Enhancement: Add body class
.lmb-openwhen 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