Bage

<p>Modal windows are interesting way to include extran information on a page. <a href="http://www.onextrapixel.com/2014/06/25/create-modal-windows-that-can-be-morphed-from-anything-with-jquery-adaptive-modal-js/" rel="nofollow ugc">adaptive-modal.js</a> makes it beautiful. You can use this little plugin which uses the same jQuery plugin to creae modal windows easily in any page or post or even on a widget uisng shortcode.</p>
<p>I have also added another functionality into this plugin, which will let you to embed your modal content into your post a page directly.</p>
<h3>Usage</h3>
<p>Upon activation, the plugin will create a custom post type called ‘Modals’. Where you can add your content, which later you can use it on a modal or embed directly into your page or post.</p>
<ol>
<li>[modal]</li>
<li>[block] </li>
</ol>
<h3>modal</h3>
<p>the ‘modal’ shortcode is to create modal windows.</p>
<p>For now the [modal] shortcode comes with four attributes.</p>
<p><strong>id</strong><br />
Your modal id. eg: <em>[modal id=2]Click here[/modal]</em></p>
<p><strong>data</strong><br />
If your modal only going to have just text, you can directly add the content in the shortcode. eg: <em>[modal data=”This is my modal content”]Click here[/modal]</em>. This shortcode is much useful when you want to add a modal window to a word in a paragrap without braking the paragrap.</p>
<pre><code>note: you cannot use both id and data in the same shortcode
</code></pre>
<p><strong>background</strong><br />
This is to style the link and the modal window background. Have to specify a valid color. eg: <em>[modal id=2 background=”#DDDDDD”]Click here[/modal]</em></p>
<p><strong>color</strong><br />
This attribute is to change the color of the link. eg: <em>[modal id=2 background=”#DDDDDD” color=”#000000″]Click here[/modal]</em></p>
<h3>block</h3>
<p>The ‘block’ shortcode is to embed your modal content into any page or post. It only has one attribute.</p>
<p><strong>id</strong><br />
id of the modal post type post.</p>
<pre><code>note: both block and modal shortcodes uses the same Modals custom post type.
</code></pre>


Flexible Modals

Flexible Modal is a very simple plugin to add modal windows to your WordPress content using shortcodes.

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>


Flexible Modals vs MakeITeasy Popup