allurewebsolutions

<p>Turn any page / post / external page into a popup instantly!</p>
<p>Perfect for showing basic content pages without redirecting a user to the page.</p>
<p>See the plugin in action: <a href="https://demo.tastewp.com/wp-post-modal" rel="nofollow ugc">https://demo.tastewp.com/wp-post-modal</a></p>
<h3>Features</h3>
<ul>
<li>Loads only the_content() field — excludes header/footer/sidebars/etc.</li>
<li>Optionally load custom fields using a custom page template <a href="https://allurewebsolutions.com/open-wordpress-post-modal-without-plugin#customize" rel="nofollow ugc">See Documentation</a></li>
<li>Trigger popup on page load using a URL a parameter</li>
<li>A page can have multiple popup links</li>
<li>Scroll to a specified anchor once the popup opens</li>
<li>Show external pages in popup</li>
<li>Show only a specific section from an external page</li>
<li>Works with shortcodes and some plugins, including Contact Form 7, BuddyPress, Visual Composer</li>
<li>Dynamically change URL in address bar to that of the the popped up page</li>
<li>Toggle simple styling</li>
<li>Visual Editor button for easy popup link creation</li>
<li>Set a breakpoint below which the page will load normally instead of a popup</li>
</ul>
<h3>Useful Links</h3>
<ul>
<li><a href="https://wp-post-modal.allureprojects.com/" rel="nofollow ugc">Demo Site</a></li>
<li><a href="https://demo.tastewp.com/wp-post-modal" rel="nofollow ugc">Demo of the Admin Panel</a></li>
<li><a href="https://allurewebsolutions.com/contact" rel="nofollow ugc">Contact us for feedback and bug reports</a></li>
<li><a href="https://allurewebsolutions.com/open-wordpress-post-modal-without-plugin#support" rel="nofollow ugc">Guidelines for submitting a support request</a></li>
</ul>


WP Post Popup

Turn any page / post / external page into a popup instantly!

Lovro Hrust

<p>Need popups to grab your users’ attention? Marketing call-to-actions that open on scroll, timer, click, matched referer or even hover?<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>🆕✨ Improved handling of long content in popups. Mobile sizing is improved as well.</p>
<p>⚠️ This is the last version which will support WordPress 6.5 and below. I am switching to newer development environment which is WP6.6+ compatible.<br />
Please open ticket in support section if that’s a problem.</p>
<p>🆕 Added roadmap section in development tab<br />
⏱️❗<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>


WP Post Popup vs MakeITeasy Popup