Shreya Agarwal

<p><a href="https://github.com/shreya0204/all-about-modal" rel="nofollow ugc">Check out the Github Repository ♥</a></p>
<p>All About Modal is a sleek modal and popup plugin designed for WordPress users who care about conversions. Whether you’re capturing leads, announcing offers, or nudging users, this plugin lets you show the right message at the right time with minimal setup.</p>
<h4>🚀 Features</h4>
<ul>
<li><strong>Smart Triggers:</strong> Show modals on scroll, exit-intent, page load, click, hover, focus, or element-in-view.</li>
<li><strong>Wrap Any Element to Trigger a Modal:</strong> Want a button or heading to open a modal? Just wrap it inside the “All About Modal” block.</li>
<li><strong>Editor-First Experience:</strong> Built for the WordPress block editor. Configure everything visually.</li>
<li><strong>Zero JS Required:</strong> All powered by the open-source.</li>
<li><strong>Mobile-Friendly:</strong> Choose to display modals on desktop, mobile, or both.</li>
<li><strong>Reusable:</strong> Modals are saved as a custom post type. Create once, use anywhere.</li>
</ul>
<h4>💼 Use Cases</h4>
<ul>
<li>Email sign-up prompts  </li>
<li>Exit-intent offers  </li>
<li>Time-limited deals  </li>
<li>Scroll-based nudges  </li>
<li>Announcement banners  </li>
<li>Gated content popups  </li>
<li>Contextual popups inside blog posts  </li>
<li>Blog/video/webinar promotions  </li>
<li>Email/SMS/WhatsApp opt-ins  </li>
<li>Upsell/cross-sell modals  </li>
<li>Audience segmentation prompts  </li>
<li>Onboarding walkthroughs  </li>
<li>Feedback/NPS collection</li>
</ul>
<h4>🔧 How It Works</h4>
<ol>
<li>Go to “Modals > Add New” and create your modal content.  </li>
<li>Insert the “All About Modal” block anywhere in your content.  </li>
<li>Select the modal to show and configure its trigger.  </li>
<li>Save and publish. Done.</li>
</ol>
<h4>🎥 Demo & Walkthrough</h4>
<p>Want to see the plugin in action?<br />
Watch demo walkthroughs (converted to GIFs) of two popular use cases:</p>
<h3>Example 1: Newsletter signup on exit intent</h3>
<p>Triggered when a visitor tries to leave the page.<br />
Great for lead magnets and email captures.</p>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/uuL7htD0V4Q?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<h3>Example 2: Book a call via CTA modal</h3>
<p>A “Talk to an expert” button opens an instant calendar popup.<br />
   No redirects. No reloads. Perfect for SaaS or service businesses.</p>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/YgDqzEuD_x4?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<p>💡 These demos were created in under 2 minutes using just the WordPress editor.</p>
<h4>👨‍💻 Technical Details</h4>
<ul>
<li>Based on the <code><tp-modal></code> Web Component  </li>
<li>Accessibility-first  </li>
<li>Clean HTML output  </li>
<li>No style overrides or bloated code  </li>
<li>Modular structure for future extensibility</li>
</ul>
<h4>🛣 Roadmap</h4>
<ul>
<li>Cookie & session-based triggers  </li>
<li>Trigger via URL parameters  </li>
<li>Auto-hide logic  </li>
<li>Optional close-after-delay  </li>
<li>Custom events API for developers</li>
</ul>


All About Modal

It lets you create modals/popups in the block editor. Trigger on scroll, click, delay & more. Great for lead capture, CTAs & announcements.

David Jensen

CloudCatch

<p>A simple yet robust solution for creating modals within the WordPress block editor.</p>
<p>🚀 <a href="https://light-modal-block.cloudcatch.io/" rel="nofollow ugc">View Demo</a></p>
<h3>Features</h3>
<ul>
<li>Fully customizable using the native block editor style controls</li>
<li>Trigger modal on click for any element via CSS selector</li>
<li>Trigger modal on page load after X milliseconds
<ul>
<li>Set cookie to not show modal again on page load until X minutes have elapsed</li>
<li>Option for user interaction within modal triggers cookie to be set</li>
</ul>
</li>
<li>Custom modal width</li>
<li>Optional close button</li>
<li>API enabled</li>
<li>Only 2kb gzipped</li>
<li>Accessibility enabled</li>
<li>Use modals within the query loop block</li>
</ul>
<h3>Attribution</h3>
<p>The Light Modal block uses a modified version of the <a href="https://github.com/Ghosh/micromodal" rel="nofollow ugc">Micromodal</a> library.</p>


Light Modal Block

Lightweight, customizable modal block for the WordPress block editor

All About Modal vs Light Modal Block