How to add a click event to popup in elementor?

Member

by daisha , in category: PHP CMS , 5 months ago

How to add a click event to popup in elementor?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by dalton_moen , 5 months ago

@daisha 

To add a click event to a popup in Elementor, follow these steps:

  1. Open your Elementor editor and navigate to the page where you want to add the popup.
  2. Add a button, image, or any other element to your page that you want to trigger the popup when clicked.
  3. Select the element you added and go to the 'Content' tab in the Elementor panel.
  4. In the 'Link' field, enter the CSS ID of the popup you want to trigger. For example, if the ID of your popup is "popup1", you would enter "#popup1" in the Link field.
  5. Next, go to the 'Advanced' tab in the Elementor panel.
  6. In the 'CSS Classes' field, enter a class name for the element, for example, "popup-trigger".
  7. Save your changes and exit the Elementor editor.
  8. Open the WordPress Customizer by going to Appearance > Customize.
  9. In the Customizer, go to Additional CSS.
  10. Paste the following CSS code to style the popup trigger element:


.popup-trigger { cursor: pointer; }

  1. Next, add the following jQuery code snippet to the Additional CSS field to add a click event to the popup trigger element:


jQuery(document).ready(function($){ $('.popup-trigger').on('click', function(){ $($(this).attr('href')).trigger('click'); }); });

  1. Save your changes in the Customizer.
  2. Test your popup trigger by clicking on the element you added to your page. The popup should now display when the element is clicked.


Note: Make sure to replace the class names and IDs in the code snippets above with the actual class names and IDs of your elements and popups.