{"id":403960,"date":"2024-06-29T08:00:00","date_gmt":"2024-06-29T08:00:00","guid":{"rendered":"https:\/\/www.weixiaoduo.com\/plugins\/makeiteasy-popup\/"},"modified":"2025-10-03T15:51:00","modified_gmt":"2025-10-03T15:51:00","slug":"makeiteasy-popup","status":"publish","type":"post","link":"https:\/\/www.weixiaoduo.com\/plugins\/makeiteasy-popup\/","title":{"rendered":"MakeITeasy Popup"},"content":{"rendered":"<p>Need popups to grab your users\u2019 attention? Marketing call-to-actions that open on scroll, timer, click, matched referer or even hover?<br \/>\nMultiple popups on one page? This plugin has it all. It provides styling consistent with core block editor blocks plus additional features.<\/p>\n<h4>Why choose Makeiteasy Popup?<\/h4>\n<p>\u25b6\ufe0f Unlike some other plugins, Makeiteasy Popup integrates seamlessly with WordPress,<br \/>\nfeeling like a native, built-in WP block. It\u2019s lightweight and self-sufficient,<br \/>\nwithout the heavy burden of a large blocks library.<br \/>\nIt relies on a single tiny dependency \u2013 micromodal.js \u2013 with a combined total of only 10 kB of JavaScript\u2755<\/p>\n<p>\ud83d\udc46 Try demo \u2013 there is a \u201cLive preview\u201d button on the top of this page \ud83d\udc46<\/p>\n<p>\u2757 Sometimes \u201cLive preview\u201d does not start due to slower responds of servers with resources. If progress stops with black screen or<br \/>\nprogress indicator does not advance anymore (loading should be finished at max 30 seconds) \u2013 in that case please refresh the page in browser.<\/p>\n<h4>Key Features<\/h4>\n<ul>\n<li>\ud83e\udd47 <strong>Feature-Rich<\/strong> and <strong>free<\/strong>.<\/li>\n<li>\ud83e\udd48 <strong>Fully Open Source<\/strong>: Including the block source code. Fork and adjust as needed.<\/li>\n<li>\ud83e\udd49 <strong>Developer friendly<\/strong>: Hooks for modifications and unopinionated starting CSS.<\/li>\n<li>\u23f2\ufe0f <strong>Future-Proof Compatibility<\/strong>: Guaranteed compatibility with future WordPress versions.<\/li>\n<\/ul>\n<p>\ud83c\udd95\u2728 Improved handling of long content in popups. Mobile sizing is improved as well.<\/p>\n<p>\u26a0\ufe0f 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 \/>\nPlease open ticket in support section if that\u2019s a problem.<\/p>\n<p>\ud83c\udd95 Added roadmap section in development tab<br \/>\n\u23f1\ufe0f\u2757<strong>Queue<\/strong> if another popup is opened, popup is placed in queue and opened upon closing the former.<\/p>\n<h3>Known limitations<\/h3>\n<p>Currently, opening several modal popups simultaneously is impossible due to the limitations of the Micromodal.js library.<br \/>\nFuture versions will replace this library with the native <code>Dialog<\/code> HTML element, including automatic migration for existing popups.<\/p>\n<h3>Block options<\/h3>\n<p>The block sidebar provides many options, most of which function similarly to other blocks. Notable options include:<br \/>\n\u2013 <strong>Opening time selector<\/strong>: See the detailed section below.<br \/>\n\u2013 <strong>Layout type<\/strong>: Floating, Fixed, Attached<br \/>\n\u2013 <strong>Popup Enabled<\/strong>: Temporarily hide the popup without deleting it.<br \/>\n\u2013 <strong>Open on interval<\/strong>: Open on given interval in days.<br \/>\n\u2013 <strong>Open on matching referer<\/strong>: Open if the user\u2019s referral URL matches.<\/p>\n<h4>Layout Types<\/h4>\n<ul>\n<li><strong>Floating<\/strong>: popup floats above content. Clicking on area outside popup closes it.<\/li>\n<li><strong>Fixed<\/strong>: popup is \u201cfixed\u201d to one of sides of screen \u2014 top, bottom, right, left<\/li>\n<li><strong>Attached<\/strong>: popup is attached to element on screen. When user scrolls, it moves with it.<\/li>\n<\/ul>\n<h4>Modality<\/h4>\n<ul>\n<li><strong>Modal<\/strong>: popup blocks everything else on screen, scrolling is not possible, popup can be closed by clicking outside of popup<\/li>\n<li><strong>Modeless<\/strong>: popup is non-blocking, user can scroll, popup can\u2019t be closed by clicking outside of popup<\/li>\n<\/ul>\n<h3>Developers<\/h3>\n<h4>Github repository<\/h4>\n<p><a href=\"https:\/\/github.com\/Lovor01\/makeiteasy-popup\" rel=\"nofollow ugc\">https:\/\/github.com\/Lovor01\/makeiteasy-popup<\/a><\/p>\n<h4>Changing the Close button<\/h4>\n<p>Using Javascript:<\/p>\n<pre><code>import { ReactComponent as CloseIcon } from '..\/assets\/close-x.svg';\naddFilter( 'makeiteasy-closeButtonIcon', 'makeiteasy\/makeiteasy-popup\/close-icon', () => (<CloseIcon \/>) );\n<\/code><\/pre>\n<p>If you customize button this way and you already have posts(or pages) with popup block,<br \/>\non post reopening the message \u201cThis block contains unexpected or invalid content.\u201d will be presented.<br \/>\nIn such case choose \u201cAttempt to repair block\u201d and if it looks good, save post.<\/p>\n<p>Using PHP:<\/p>\n<pre><code>add_action( 'render_block_makeiteasy\/popup', function($content) {\n  $svg = file_get_contents( __DIR__ . '\/path_to_file\/close-button-dark.svg' );\n  return preg_replace(\n    '~(<button.*class=\"makeiteasy-popup-close\".*?>).*(<\/button>)~m',\n    \"$1$svg$2\",\n    $content\n    );\n} );\n<\/code><\/pre>\n<h4>Attaching Code to Modal Events<\/h4>\n<p>Custom events \u2018makeiteasy\/openModal\u2019 and \u2018makeiteasy\/closeModal\u2019 are fired on modal open and close. Events fire on modal itself, DOM element<br \/>\nwith class <code>.wp-block-makeiteasy-popup<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Advanced block based pop-up solution.<\/p>\n","protected":false},"author":65,"featured_media":407224,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"slim_seo":{"title":"MakeITeasy Popup - \u8587\u6653\u6735\u63d2\u4ef6\u76ee\u5f55","description":"Advanced block based pop-up solution."},"footnotes":""},"categories":[1],"tags":[288,14682,3693,115,1069],"class_list":["post-403960","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-block","tag-dialog","tag-modal","tag-pop-up","tag-popup"],"_links":{"self":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts\/403960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/comments?post=403960"}],"version-history":[{"count":0,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts\/403960\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/media\/407224"}],"wp:attachment":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/media?parent=403960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/categories?post=403960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/tags?post=403960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}