{"id":104264,"date":"2023-02-09T18:01:03","date_gmt":"2023-02-09T12:31:03","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&amp;p=104264"},"modified":"2023-02-09T18:01:03","modified_gmt":"2023-02-09T12:31:03","slug":"elementor-popup-on-other-element-click","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/elementor-popup-on-other-element-click\/","title":{"rendered":"How to show Elementor Popup on link Click of other Element using selector?"},"content":{"rendered":"\n<p>If you want to show popups on click of custom elements like an image or text rather than the usual popup trigger elements, you can do that easily with our Popup Builder widget using unique CSS classes.<\/p>\n\n\n\n<p>This will give you the flexibility to create custom trigger elements to open and close your popups.<\/p>\n\n\n\n<p><em>To check the complete feature overview documentation of The Plus Addons for Elementor Popup Builder widget, <a href=\"\/docs\/popup-builder-elementor-widget-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/em><\/p>\n\n\n\n<p><strong><em>Requirement&nbsp; &#8211; This widget is a part of The Plus Addons for Elementor, make sure its installed &amp; activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/popup-builder?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>For this add the Popup Builder widget and the widget you want to use as the popup trigger button let\u2019s say the Elementor Image widget, on the page.<\/p>\n\n\n\n<p>First, select the Image widget and go to the Advanced tab and add a class name in the CSS Classes field.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"992\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/image-widget-class.png\" alt=\"image widget class\" class=\"wp-image-104266\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/image-widget-class.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/image-widget-class-91x300.png 91w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>Now select the Popup Builder widget and go to <strong>Display Options<\/strong> > <strong>On Any Other Element&#8217;s Click<\/strong> and turn on the toggle, and in the <strong>Unique Class (Open)<\/strong> field add the same class name.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"300\" height=\"672\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/popup-builder-open-class.png\" alt=\"popup builder open class\" class=\"wp-image-104265\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/popup-builder-open-class.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/popup-builder-open-class-134x300.png 134w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>Now if someone clicks on the image the popup will open.&nbsp;<\/p>\n\n\n\n<p>In a similar way you can use a unique class to close the popup this can be useful if you want to use a button widget to close the popup instead of the normal popup close button.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: Make sure there are no popup trigger elements on the page, so set the <\/em><strong><em>Select Option<\/em><\/strong><em> to <\/em><strong><em>Hidden<\/em><\/strong><em> in the <\/em><strong><em>Content<\/em><\/strong><em> tab.<\/em><\/p>\n<\/blockquote>\n","protected":false},"author":16,"featured_media":104374,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[527,549],"class_list":["post-104264","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-plus-widgets","docs-popup"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=104264"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104264\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/104374"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=104264"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=104264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}