SEV Simple Modal Dialog

Adds two blocks that show content in a modal/overlay: any blocks via "Modal Dialog", or a Contact Form 7 form via "CF7 Modal".

Description

SEV Simple Modal Dialog adds two blocks for showing content in a popup/overlay, opened by a button click (or any link pointing at the modal's HTML anchor):

• Modal Dialog — a container block. Put any other blocks inside it (text, images, a whole layout, or another plugin's block) and they appear in a modal instead of inline on the page.
• CF7 Modal — pick one of your existing Contact Form 7 forms from a dropdown and it's shown in a modal. Requires Contact Form 7 to be active; the block only appears in the inserter when CF7 is present.

Features

• No settings, no external calls — just activate it.
• Trigger from anywhere: every modal gets a stable ID (via the block's "HTML anchor" setting), so any link/button on the page can open it with #that-id, not just the block's own built-in trigger button.
• The built-in trigger button can be hidden per block if you only want to open the modal from your own links.
• Closes on Escape, on background click, or automatically a moment after a CF7 form is submitted successfully.
• Background scroll is locked while a modal is open, with a mobile-Safari-safe implementation (visualViewport-aware, so the on-screen keyboard doesn't shift the overlay).
• Modals render as direct children of <body>, so they escape theme layout width constraints instead of fighting them with CSS.

Installation

1. Upload the sev-simple-modal-dialog folder to the /wp-content/plugins/ directory.
2. Activate the plugin through the "Plugins" menu in WordPress.
3. In the block editor, insert the "Modal Dialog" block (or "CF7 Modal", if Contact Form 7 is active) and configure it in the sidebar.

Frequently Asked Questions

Why don't I see the "CF7 Modal" block?

It only registers when Contact Form 7 is active, since it has nothing to show otherwise. Activate Contact Form 7 first.

How do I open a modal from a link that isn't the block's own trigger button?

Give the block an HTML anchor under "Advanced" → "HTML anchor" in the sidebar (e.g. contact), then point any link on the page at #contact. This also lets multiple buttons/links open the same modal.

Can I put a "CF7 Modal" block inside a "Modal Dialog" block?

Yes, but there's no need to — "CF7 Modal" already opens in its own modal. Nesting them would just add a second, redundant overlay.

Does this work on Multisite?

Yes. The plugin can be network-activated or activated per site.

Screenshots

1. "Modal Dialog" block settings in the editor sidebar
2. "CF7 Modal" block settings in the editor sidebar

Changelog

1.0.0

• Initial release.