David Jensen

CloudCatch

A simple yet robust solution for creating modals within the WordPress block editor.
🚀 <a href="https://light-modal-block.cloudcatch.io/" rel="nofollow ugc">View Demo</a>
<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>
The Light Modal block uses a modified version of the <a href="https://github.com/Ghosh/micromodal" rel="nofollow ugc">Micromodal</a> library.

Light Modal Block

Lightweight, customizable modal block for the WordPress block editor

Dabuuker

Show content in a modal after page load.
Usage:
Select ‘SN Popup’ from the admin menu, then Add New. Type a name for the popup and insert any content you like. If you’re done, click Publish.
Now find a page or post you’d like to see the popup on and edit it. There should be a new metabox called ‘SN Popup’, choose the settings you want and hit Update, then view your page.
Video: https://www.youtube.com/watch?v=t6lt6v3fuEQ
To change the styling of the modal, you can override its styles in your theme’s css. Or for more advanced styling you can dequeue the default css and replace it with your own.
For reference, the default unminified version of the css is located at /plugins/sn-popup/vendor/featherlight-1.3.4/src/featherlight.css
To dequeue the old css and enqueue your own, add something like this to your functions.php:
<pre><code>add_action('wp_enqueue_scripts','remove_featherlight_css'); function remove_featherlight_css(){ wp_dequeue_style('sn-featherlight'); wp_enqueue_style('featherlight-new-css','/path-to-new-css'); } </code></pre>

Light Modal Block vs Soronet Popup