Alessandro Rosato

<p>This plugin is meant to deliver one thing and that’s a simple modal that renders whenever a user visits your site for the first time. It has no third-party dependencies, no paid features, nothing.</p>
<p>The minimal JavaScript code is written in vanilla JS without jQuery for a faster and lighter experience. Code is meant to load all modal assets (including the image) only when necessary, to avoid burdening your pages with unneeded requests.</p>
<p>It uses cookies to store a hash that will hide the modal after the first visit. This hash can be invalidated from the admin section to force a re-render of the modal. Useful for when you want to push a new message/information.</p>
<h3>Features</h3>
<ul>
<li>Set a title, an image and text (all optional fields, so you can mix and match them).</li>
<li>Modal can be shown after a delay.</li>
<li>Invalidate browsers cache to re-render the modal.</li>
<li>Responsive layout.</li>
<li>No PRO features!</li>
</ul>
<h3>Style override</h3>
<p>You can easily override the plugin’s style by using the following IDs in your custom css file:<br />
* <code>arjam-modal-title</code> – Title of the modal window.<br />
* <code>arjam-modal-image</code>  – Image of the modal window.<br />
* <code>arjam-modal-richtext</code> – Text of the modal window.<br />
* <code>arjam-modal-background</code> – Dark background behind the modal window.<br />
* <code>arjam-modal-content</code> – The modal window itself.<br />
* <code>arjam-modal-close</code> – Close button of the modal window.</p>
<h3>Cookies and local storage</h3>
<p>This plugin stores on the visitor browser the hash that is meant to check whether the user has seen the current modal or not. This hash is stored in a key in the local storage called <code>arjam_hash</code>.</p>
<p>Besides that, no other cookie or local storage entry is created.</p>


ARJAM – Just a Modal

Just a simple modal window to display content to a new visitor on their first visit. Includes a title, image and text.

Lovro Hrust

<p>Need popups to grab your users’ attention? Marketing call-to-actions that open on scroll, timer, click, matched referer, hover, or exit intent?<br />
Multiple popups on one page? This plugin has it all. It provides styling consistent with core block editor blocks plus additional features.</p>
<h4>Why choose Makeiteasy Popup?</h4>
<p>▶️ Unlike some other plugins, Makeiteasy Popup integrates seamlessly with WordPress,<br />
feeling like a native, built-in WP block. It’s lightweight and self-sufficient,<br />
without the heavy burden of a large blocks library.<br />
It relies on a single tiny dependency – micromodal.js – with a combined total of only 10 kB of JavaScript❕</p>
<p>👆 Try demo – there is a “Live preview” button on the top of this page 👆</p>
<p>❗ Sometimes “Live preview” does not start due to slower responds of servers with resources. If progress stops with black screen or<br />
progress indicator does not advance anymore (loading should be finished at max 30 seconds) – in that case please refresh the page in browser.</p>
<h4>Key Features</h4>
<ul>
<li>🥇 <strong>Feature-Rich</strong> and <strong>free</strong>.</li>
<li>🥈 <strong>Fully Open Source</strong>: Including the block source code. Fork and adjust as needed.</li>
<li>🥉 <strong>Developer friendly</strong>: Hooks for modifications and unopinionated starting CSS.</li>
<li>⏲️ <strong>Future-Proof Compatibility</strong>: Guaranteed compatibility with future WordPress versions.</li>
</ul>
<p>🆕 Added “open on exit intent” feature. <strong>It works only on desktop.</strong> When popup is set up to open on exit intent and<br />
user moves mouse outside the top border of the browser inner window (screen), popup appears. User can choose when feature is activated<br />
(after how many seconds since page was loaded), so popup can’t open too early.</p>
<p>⏱️❗<strong>Queue</strong> if another popup is opened, popup is placed in queue and opened upon closing the former.</p>
<h3>Known limitations</h3>
<p>Currently, opening several modal popups simultaneously is impossible due to the limitations of the Micromodal.js library.<br />
Future versions will replace this library with the native <code>Dialog</code> HTML element, including automatic migration for existing popups.</p>
<h3>Block options</h3>
<p>The block sidebar provides many options, most of which function similarly to other blocks. Notable options include:<br />
– <strong>Opening time selector</strong>: See the detailed section below.<br />
– <strong>Layout type</strong>: Floating, Fixed, Attached<br />
– <strong>Popup Enabled</strong>: Temporarily hide the popup without deleting it.<br />
– <strong>Open on interval</strong>: Open on given interval in days.<br />
– <strong>Open on matching referer</strong>: Open if the user’s referral URL matches.</p>
<h4>Layout Types</h4>
<ul>
<li><strong>Floating</strong>: popup floats above content. Clicking on area outside popup closes it.</li>
<li><strong>Fixed</strong>: popup is “fixed” to one of sides of screen — top, bottom, right, left</li>
<li><strong>Attached</strong>: popup is attached to element on screen. When user scrolls, it moves with it.</li>
</ul>
<h4>Modality</h4>
<ul>
<li><strong>Modal</strong>: popup blocks everything else on screen, scrolling is not possible, popup can be closed by clicking outside of popup</li>
<li><strong>Modeless</strong>: popup is non-blocking, user can scroll, popup can’t be closed by clicking outside of popup</li>
</ul>
<h3>Developers</h3>
<h4>Github repository</h4>
<p><a href="https://github.com/Lovor01/makeiteasy-popup" rel="nofollow ugc">https://github.com/Lovor01/makeiteasy-popup</a></p>
<h4>Changing the Close button</h4>
<p>Using Javascript:</p>
<pre><code>import { ReactComponent as CloseIcon } from '../assets/close-x.svg';
addFilter( 'makeiteasy-closeButtonIcon', 'makeiteasy/makeiteasy-popup/close-icon', () => (<CloseIcon />) );
</code></pre>
<p>If you customize button this way and you already have posts(or pages) with popup block,<br />
on post reopening the message “This block contains unexpected or invalid content.” will be presented.<br />
In such case choose “Attempt to repair block” and if it looks good, save post.</p>
<p>Using PHP:</p>
<pre><code>add_action( 'render_block_makeiteasy/popup', function($content) {
  $svg = file_get_contents( __DIR__ . '/path_to_file/close-button-dark.svg' );
  return preg_replace(
    '~(<button.*class="makeiteasy-popup-close".*?>).*(</button>)~m',
    "$1$svg$2",
    $content
    );
} );
</code></pre>
<h4>Attaching Code to Modal Events</h4>
<p>Custom events ‘makeiteasy/openModal’ and ‘makeiteasy/closeModal’ are fired on modal open and close. Events fire on modal itself, DOM element<br />
with class <code>.wp-block-makeiteasy-popup</code>.</p>


ARJAM – Just a Modal vs MakeITeasy Popup