Linux 软件免费装

在这里免费安装WordPress以及其他软件

Banner图

Light Modal Block

开发者 cloudcatch
dkjensen
更新时间 2026年6月25日 21:19
捐献地址: 去捐款
PHP版本: 6.6 及以上
WordPress版本: 7.0
版权: GPL-2.0-or-later
版权网址: 版权信息

标签

lightbox modal popup block gutenberg full-site-editing

下载

1.1.1 1.1.0 1.2.0 1.0.0 1.3.0 1.0.1 1.3.2 1.9.0 1.2.1 1.3.1 1.5.0 1.6.0 1.7.0 1.7.1 1.8.0 1.4.0 1.9.1 1.9.2

详情介绍:

A simple yet robust solution for creating modals within the WordPress block editor. 🚀 View Demo

安装:

  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

屏幕截图:

  • 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

常见问题:

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

How can I animate the modal opening and closing?

Add the following CSS to your child theme to fade the modal in and out: .wp-block-cloudcatch-light-modal-block__wrapper { opacity: 0; transition: opacity 0.3s ease, display 0.3s allow-discrete; } .wp-block-cloudcatch-light-modal-block__wrapper.is-open { opacity: 1; } @starting-style { .wp-block-cloudcatch-light-modal-block__wrapper.is-open { opacity: 0; } } Or, for a livelier effect, use this CSS to make the modal pop in with a springy slide and scale: .wp-block-cloudcatch-light-modal-block__wrapper { opacity: 0; transition: opacity 0.3s ease, display 0.3s allow-discrete; } .wp-block-cloudcatch-light-modal-block__wrapper.is-open { opacity: 1; } .wp-block-cloudcatch-light-modal-block__wrapper .wp-block-cloudcatch-light-modal-block { opacity: 0; transform: translateY(40px) scale(0.9); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; } .wp-block-cloudcatch-light-modal-block__wrapper.is-open .wp-block-cloudcatch-light-modal-block { opacity: 1; transform: translateY(0) scale(1); } @starting-style { .wp-block-cloudcatch-light-modal-block__wrapper.is-open { opacity: 0; } .wp-block-cloudcatch-light-modal-block__wrapper.is-open .wp-block-cloudcatch-light-modal-block { opacity: 0; transform: translateY(40px) scale(0.9); } }

更新日志:

1.9.2 1.9.2 1.9.0 1.8.0 1.7.1 1.7.0 1.6.0 1.5.0 1.4.0 1.3.2 1.3.1 1.3.0 1.2.1 1.2.0 1.1.1 1.1.0 1.0.1 1.0.0