How do I trigger an onclick popup when using elementor in wordpress

Resolved Gary H
(@axe6st)

1 year, 8 months ago
I am trying to get a popup to display when you click a button. The client has decided to redesign the website in house and created a nice site using Elementor in WordPress. The old site had popups on it that worked fine. Here is the one of them on the old site.
https://packagingdynamics.com/products/nozzles/pressure-gravity-positive-closure-liquid-filling-nozzle-specs/
I used custom CSS in the theme to create the buttons, and a link to it that looked like this
<a class=”MyButton” href=”#”> Click for 3D view</a>
With Elementor, I can’t add custom CSS to Elementor, if I add it to theme it doesn’t work. How do I reference the popup (labeled as .MyButton in popup box) to be triggered when the user clicks a link, or if possible a button. The area where I want to add a button (or text link) is inside a Toggle in Elementor.

Thanks in advance for any help, this is driving me crazy! I understand they used Elementor because they are inexperienced and needed a wsywig editor, but Elementor is driving me nuts. Every feature requires a paid subscription!

Gary H.
- This topic was modified 1 year, 8 months ago by Gary H.
The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Support Jasmine
(@hyenokian)

1 year, 8 months ago
Dear @axe6st,

Thank you for the topic.

Please provide us with the following information for further investigation of your case.
1. The plugin version you are using.
2. The WordPress version you are using.
3. Let us know whether we understand the request correctly that the popup is not working on the website built via Elementor.
4. Please send us the link, where the given popup is enabled.
5. Let us know in the case of what trigger the popup must be opened.
6. Let us know whether there is a cache generated on your website or not.
Looking forward to your resposnse.

Thank you.
Thread Starter Gary H
(@axe6st)

1 year, 8 months ago
Thank you for your reply.
The plugin version is the latest version available. The wordpress version is also the latest version available. The popup is NOT working on the website built with Elementor. When you click the link it just goes back to the top of the page. The popup is set to open with the OnClick trigger. The page it is on is here, http://169.60.137.196/full-product-line/ (Scroll to the bottom and click to expand the title that says Pressure Gravity Fill to Level with Vacuum Nozzle, it is at the bottom of that section)
There is currently no cache plugin on the site yet.
General settings for the popup box are as follows
Set as a shortcode popup. The popup is enabled. Title, description and shortcode are all set.
Show only for author is unchecked. Display is set to include, Post type is pages, posts is Nozzles and Full product line (The pages I want the popup to be displayed on). Show on homepage is unchecked. Trigger is set to OnClick. CSS selector is set as .MyButton

I have added my custom CSS code to the custom CSS code area in the styles tab on popup box.
This is the custom code I added.
```
.MyButton {
	box-shadow: 0px 10px 14px -7px #276873;
	background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
	background-color:#599bb3;
	border-radius:8px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
	padding:13px 32px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
}
.MyButton:hover {
	background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
	background-color:#408c99;
}
.MyButton:active {
	position:relative;
	top:1px;
}

.MyButton1 {
	box-shadow: 0px 10px 14px -7px #276873;
	background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
	background-color:#599bb3;
	border-radius:8px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
	padding:13px 32px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
}
.MyButton1:hover {
	background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
	background-color:#408c99;
}
.MyButton1:active {
	position:relative;
	top:1px;
}

.MyButton2 {
	box-shadow: 0px 10px 14px -7px #276873;
	background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
	background-color:#599bb3;
	border-radius:8px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
	padding:13px 32px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
}
.MyButton2:hover {
	background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
	background-color:#408c99;
}
.MyButton2:active {
	position:relative;
	top:1px;
}
```
Thank you for your help.
Gary H.
Plugin Support Jasmine
(@hyenokian)

1 year, 8 months ago

Dear @axe6st,

Thank you for your response.

We checked and noticed that the button you are mentioning has the class MyButton.

See the screenshot below:

View post on imgur.com

However, the event is set for the selector with the following class:
Mybutton

I want to mention, that this part is case-sensitive.
The class doesn’t work as the b letter of the word button is written lowercase in one place, and uppercase in another.

Please check this case and let us know whether the problem has been solved or not.

Thank you.

Thread Starter Gary H
(@axe6st)

1 year, 8 months ago

Thank you. That was the problem.

Gary H.

Plugin Support Jasmine
(@hyenokian)

1 year, 8 months ago

Dear @axe6st,

Thank you for your response.

Glad to hear that the problem has been solved for you.
If your query is resolved, please take a moment to rate and review the plugin or support.

Many thanks in advance!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘How do I trigger an onclick popup when using elementor in wordpress’ is closed to new replies.