Modal Block

Display content within a popup window.

The Modal Block is perfect for revealing important content that is initially hidden from view.

View Pricing View Demo
Latest Version 2.4
WordPress Version 5.2+
View Changelog
View Setup Guide
Get Support

Reveal a dismissible popup window upon clicking a button or text link. The Modal Block is available within the Organic Blocks Bundle, and is developed to work within the WordPress 5+ Gutenberg editor.

Popup modals are a great tool for displaying content that you would like hidden from the rest of the page content. For instance, a contact or newsletter form, or a list of downloadable files. Additionally, modals are useful for documentation, advertising, data collection, and website organization.

Getting Started

Within the WordPress block editor, add the Modal Block to any page or post to get started. Search “Organic” or “Modal” within your list of available blocks. Once you’ve added the block, you may enter the modal content directly within the editor. However, the content remains hidden until the modal button is clicked. Additionally, block options are available to modify the modal colors and style.

Modal Block Options

Each instance of the block contains several options. Click on the block within the editor to reveal the block options. Then, modify the modal styles and settings on the right. Block options are divided into categories. Moreover, a description of each option is provided below.

Please Note: You must click directly on the Modal Block to modify its styles. Not the nested blocks inside the modal container! Otherwise, you will not see the block options listed below.

Style Settings
  • Style Presets: Choose from a list of predefined styles for the block.
  • Modal Border: Modify the border width and color for the popup window.
  • Modal Shadow: Modify the shadow size, opacity, and color for the popup window.
  • Button Border: Modify the border width and color for the modal button.
  • Button Shadow: Modify the shadow size, opacity, and color for the modal button.
Display Settings:
  • Display As Text Link: Display a text link instead of a button for revealing the modal.
Color Settings:
  • Modal Background: Change the background color of popup window.
  • Button Text Color: Change the text color of the modal button.
  • Button Color: Change the background color of the modal button.
  • Button Hover Color: Change the hover state color of modal button.

Modal Block Requirements

All WordPress blocks, including Organic Blocks, require WordPress 5+ and the Gutenberg editor. Additionally, the Organic Blocks Bundle requires that your server is using PHP 7+ in order to function properly. Please Note: These are standard requirements for running WordPress 5+ on any web server.