Modal Guten Block

描述

This project provides a modal / popup block for the WordPress Gutenberg editor.

  • Multiple methods for triggering modal including button, text link, image link, external class, and page load.
  • User definable modal content using Gutenberg blocks, for example, image, paragraph etc.
  • Support for multiple modal window sizes.
  • Modal window transitions for fade, left, right, up down.
  • Manual trigger modal initialization by calling bodModal.initModal()
  • Custom events for before open, after open, before close, after close so custom code can be used.
  • Lots of customizable options including Trigger Button Label, Button Color, Trigger Text, Trigger Text Size, Trigger Image, Trigger Class, Modal Delay, Trigger Element Alignment, Overlay Background Color, Title Text Size, Title Font Color, Title Background Color, Title Padding, Border Radius.
  • Supports multiple modals on the same page.
  • ADA compliant.
  • Modal to modal links.
  • Multiple ways to close the modal.
    • Escape key
    • Close button ‘X’ in the top right of the screen.
    • Close button ‘X’ in the modal title.
    • Close button at the bottom on the modal content.
  • Uses create-guton-block for easy config.

Donations

If you like the plugin, consider a donation to support further development. Click here

屏幕截图

  • Sample modal window.
  • Modal Guten Block in editor.

区块

该插件提供了1个区块.

  • Modal Guten Block

安装

From your WordPress dashboard

  1. Visit Plugins > Add New
  2. Search for “Modal Block”
  3. Install the “Modal Block” plugin
  4. Activate “Modal Block” from your Plugins page
  5. Insert Block on your Gutenberg Editor and select “Modal Block” which is located in Widgets.

评价

2023年1月24日
I think everything is almost perfect, it would be great if "everything was a little more clean and polished". Silly things like: add hover color change when focusing edit fields (hard to tell how big the field is) -- for example the "block-editor-plain-text" input field should have more padding, square matching border radius and better font matching size Missing option to "disable transition" visual effect
2023年1月2日 1 回复
What a great little plugin for modals. It is very simple to use and features many ways to use and display them. I was looking at an expensive theme addon that did all of this, but this one does it all FREE, thank you.Would make it complete if it had options to; Set to display after x time Fade in/out Have an exit modal But other than that it is fully functional for everything else.
2022年10月12日
This is such a great plugin. So easy to set up with so many options. Makes pop-ups a breeze!
2022年4月1日
Practical and lightweight plugin. Well integrated. Good job. It would be nice to improve the interface for customization especially for the button. And a X button for closing at the top would be great. In general it works fine.
2022年3月19日
Well integrated into Gutenberg with a lot of options that allow customization. Thanks for sharing this!
阅读所有15条评价

贡献者及开发者

“Modal Guten Block” 是开源软件。 以下人员对此插件做出了贡献。

贡献者

将“Modal Guten Block”翻译成您的语言。

对开发感兴趣吗?

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

更新日志

2.1

  • Transition effects (fade, left, right, up, down) and ‘Custom Events’ for before modal open, after open, before close, after close
  • Manual trigger modal initialization by calling bodModal.initModal()

2.0

  • Modal background images. Separate options into Trigger, Modal, Title and Content panels. Title close X ability to define size. Trigger based on URL text.

1.5

  • modal to modal links, text align title, title close button

1.4.3

  • Option to disable close modal on Escape key press.

1.4.2

  • Fixed issue where clicking on nested content in edit mode resulted in modal edit content box closing.
  • When modal opened focus on first element but do not scroll to it. Stops modal opening at bottom.

1.4.1

  • Fix for when we trigger on image and image is smaller than medium size. In this case we default in the full size image.

1.4

  • Make ADA compliant including using button instead of span, setting / returning focus and focus trapping.
  • Add custom class to dialog when modal opens.
  • Add toggle option to disable close on overlay click.

1.3

  • Optional display only once for timer based modals. Modal Id links timer modals on different pages to say they are the same. Also ability to say how long before modal is shown again.

1.2

  • Change icon to use SVG – use alt tag from trigger image – optional close btn in modal

1.1

  • Update for deprecated wp.editor (changed to wp.blockEditor) and core/editor (changed to core/block-editor).

1.0.0 (8/19/2019)

  • First release