Solvedelementor Triggering a popup by using a class or custom JS code
βοΈAccepted Answer
@bkjproductions (and for anyone else looking for a JS only solution) you can use:
// accessible on window.elementorProFrontend
elementorProFrontend.modules.popup.showPopup( { id: 123 } );
In the example above 123
corresponds to the document ID (Post ID) of the popup which you can derive many ways, but within the DOM it's the ID of the containing element:
<div id="elementor-popup-modal-123">...</div>
Known to work in version 2.8.* and of course with Elementor Pro.
frontend.js
is a dependency (handle: elementor-frontend
) so make sure you are executing this call after frontend.js
is enqueued and printed.
Other Answers:
Being able to trigger by CSS class would give the popups a lot more flexibility.
This is very useful for being able to trigger the popup with an element that doesn't have the dynamic URL field available, such as elements not created by Elementor, text within posts, or 3rd party addons that don't have the dynamic option built into the URL field.
This is short jQuery solution to open Popup from within code. Just place the correct Popup document id.
jQuery(window).on('elementor/frontend/init', function() {
elementorFrontend.on( 'components:init', function() {
elementorFrontend.documentsManager.documents[id].showModal();
});
});
As @unostar already mentioned, you can open a popup with this:
elementorFrontend.documentsManager.documents[id].showModal();
id is the data-elementor-id value for that popup.
Now, you can close a modal via JS too. You only need to call this other method:
elementorFrontend.documentsManager.documents[id].getModal().hide();
Again, replace id with the proper value for your popup.
This is useful so you can bind a button ID inside the popup, to close it programatically from outside Elementor.
Elementor really need a better API for developers. Or documentation for the one they already use actually.
Prerequisites
What problem is your feature request going to solve? Please describe.
We used to use a plugin called Popup Maker. With their solution, each popup can be set with one or more custom classes, which, when used in a link or triggered via Javascript, would trigger the pop up. It would be great to have this feature with Elementor popups, to have a special class which can be used in theme templates or other plugin code to trigger the popup open.
Describe the solution you'd like
Allow a custom class or multiple classes so we can trigger a popup from within JS or via a custom link, where it can be triggered outside of a specific Elementor button or link (like in a template).
Describe alternatives you've considered
As I mentioned, we've used Popup Maker's plugin for a while, good example of how it can be done, but I'd love to consolidate everything to Elementor and reduce plugins.
Additional context