Solvedelementor Triggering a popup by using a class or custom JS code

Prerequisites

  • I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
  • The feature is still missing in the latest stable version of Elementor ( Elementor Pro. )

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

17 Answers

βœ”οΈ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.

Related Issues:

27
elementor Accordion - setting for all closed at start
Yeah not seeing a fix in 1.8.x but here's some code you should be able to copy/paste without modding...
19
elementor πŸ“£ Elementor v3.1 Beta 4 Release πŸ“£
As most of the users has been hungry for performance and custom breakpoint improvement ...
15
elementor data-tab link anchor to tabs
Here is my function as I could not wait :) For anyone who needs it :) Hey ...
15
elementor Add Filters and Hooks to Search Form Widget
@pako69 If you need to force Elementor's search to only use a specific post type lets say product fo...
14
elementor Popup - Close when you click on a button
@JoeDarko Currently this feature is not supported but we will look into it in the future if we see a...
14
elementor Improve performance: Reduce DOM elements
If you have concrete suggestions for reducing the number of DOM elements - we are open to hearing it...
13
elementor How to hide some Elementor Pro widgets from the frontend editor?
@norewp - thank you The following is sample code for removing everything (for now > I suppose in the...
12
elementor Include custom templates in Elementor template library (Not My template)
@dinhtungdu Sure feel free to use this idea! If you want Prerequisites I have searched for similar f...
12
elementor Triggering a popup by using a class or custom JS code
@bkjproductions (and for anyone else looking for a JS only solution) you can use: In the example abo...
9
elementor "Edit with Elementor" sub menu item in admin bar not showing on WordPress 5.6
This works for me.. add to your site CSS: #wp-admin-bar-elementor_edit_page:hover > div { display: b...
9
elementor Elementor 1.9 - Beta Release (RC3 Updated)
v1.9 Beta Version RC3 We just released a new beta version please update your version to v1.9.0 RC3 ...
8
elementor My templates -> Display Conditions: support polylang for localisation
@ziogaschr Elementor can't guess which multilingual 3rd party plugin you are using and we don't want...
8
elementor ACF relationship field as Posts source
This was such a pain in the ass Thank you for finally solving this I'm confused as to why this isn't...
6
elementor Elementor v2.9 Beta 5 (RC3) Release πŸ“£
We just released a new beta version please update your version to v2.9 Beta 2 =========== Beta 5 UPD...
6
elementor πŸ“£ Elementor v3.2 Beta 4 Release πŸ“£
The following snippet was recommended to remove eicons: Please confirm this is still applicable for ...
6
elementor Elementor Popup doesnt run with Contact Form 7
Hello @hazelnutz77 Here is a tidier and more versatile piece of code: Add this to your functions.php...
5
elementor πŸš€ Elementor v3.4 Beta 5 Release πŸš€
@fabianenzensperger - thanks for your feedback We are aware about the UI problem with the global fon...
5
elementor Animated Headline Do Not Loop?
Not the most graceful solution but you can do this with some CSS How can i make the animated headlin...
4
elementor "javascript:history.back()" bug since last update
Hi @Code711 Thanks for your input We removed the option to add JavaScript to the URL to avoid potent...
4
elementor BUG: Tabs Widget content enlarges from top left corner when switching tab (after latest updates)
So here is how I temporarily solved this issue a bit hackish solution but it works: It helped in my ...
4
elementor Add "Child Pages of Parent" To "Posts" Widget
@stevenmonson This can be easily done using Custom Query Filter ex: It would be so nice if the Posts...
4
elementor limit DATE fields in Elementor Forms
I just figured this out and I thought it would be useful for everyone because I haven't managed to f...
4
elementor Elementor Pro Bug: The Cards Skin displays only one Badge
@ramiy Not a bug this is the way it works Now as a feature request this should be possible with #444...
4
elementor Pop up menu closing on clicking link
@ErwinvanDeutekom You can use JS to catch a click on a link in your popup and trigger a close action...
3
elementor Elementor Pro Forms MailChimp Conditional Opt-in Field
I needed this functionality too I couldn't (quickly) find usable hooks in Elementor ...
3
elementor Elementor seems to break swiperJS (5.3.0) breakpoint settings (swiper navigation not working)
With Elementor Version 2.9.1 the situation improved but is not fixed completely ...
3
elementor Shape divider above content after updating Elementor.
Hello It's not an Elementor update issue We have the same on 3.0 and 2.9 The problem is only on Chro...
3
elementor How do I change the Date Format in Forms?
You can follow the solution given here: #3605 (comment) minus the translation part ...
192
theme ui Syntax error: pragma and pragmaFrag cannot be set when runtime is automatic.
Just adding here in case anyone sees this error message after upgrading a project to create-react-ap...
94
server Upgrade fails with - Column name "oc_flow_operations.entity" is "NotNull", but has empty string or null as default
I just got this error while upgrading from 17.0.10 to 18.0.10 Also with me the column entity did not...
44
server Thunderbird 60.x unable to use caldav/carddav
By disabling the newly introduced parameter network.cookie.same-site.enabled the problem can be solv...
41
server Redirect loop login / Renewing session token failed
Hello I had a similar issue regarding the redirect mine was related to url overwrite protocol option...
37
bulma [Feature] SASS division without slash
I've just created a fix/divide branch Will merge and release today. This is about Bulma ...
29
materialize Changes for v1.0.0
There are some more issues I would consider to be included in v1.0.0 I think we should consider to r...
27
ant design landing ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.
temporary way to fix this problem:ant-design/ant-design#23624 😒 remove less-loader@6.0.6 and instal...
26
bulma Importing Bulma in Create React App
For posterity's sake When importing Bulma in Create React App if you do this: You'll receive this er...
26
server Security and config warnings
Finally got this sorted as well How to use GitHub Please use the πŸ‘ reaction to show that you are af...
23
server Syntax error or access violation: 1118 Row size too large
Changing the ROW_FORMAT to DYNAMIC did not solve the issue Steps to reproduce Run Nextcloud 16.0.0 f...
21
materialize Can't select options or scroll in select input on mobile
I found the solution! With the meta viewport like this work fine for me <meta name=viewport content=...
18
materialize [1.0.0.alpha1] Side nav doesn't work with turbolinks 5
seem like instance still alive when turbolinks:load page it works if we destroy the existing instanc...
18
server [Nextcloud 15] Nextcloud clients cannot log in after upgrading from 15.0.0 to 15.0.2
nextcloud/android#3430 TL;DR: try adding this to your config.php: 'overwriteprotocol' => 'https', ...
18
server [Updater] Could not find resource js/config.js to load
Same issue on Nextcloud 20 PHP 7.4.3 MYSQL 8 APACHE2 Web server error logs How to use GitHub Please ...
18
blueprint First-class support for @import'ing blueprint scss files
@Ciantic It does work with the generated .css files you have to use the Webpack alias resolution ~ c...
17
materialize different colors for different toasts
In Updated Version It's something like: I would like to show the toast like Saved Successfully Pleas...
16
materialize Can't check RadioButtons or Checkbox inside input-fields div
The best solution is to not wrap the checkboxes in the .input-field class Another solution is to add...
16
server Failed Code Integrity because of EXTRA_FILE after Update from 16.0.1 to 16.0.2
Okay so for everyone getting this two things: Delete the cypress.json and the cypress folder in the ...
16
server OSX calendar sync fails (via caldav)
@dhowe I managed to get it working on High Sierra if I select the advanced profile when adding a new...
16
theme ui integrating theme-ui with storybook in a gatsby project
I managed to fix this with the below main.js storybook config As @hasparus says you can force storyb...
13
MaterialDesignInXamlToolkit Could not load file or assembly 'MaterialDesignColors, Culture=neutral' or one of its dependencies
For folks still encountering this issue: this post by Carlos Anderson explains what's going on: Ther...
12
materialize Error with Meteor 1.6-rc7 and node-sass 4.5.2
Not resolved for me I also did a fresh install of Meteor 1.6.0.1 and meteor add materialize:material...