Simple close button on popup

I have a popup that needs to have a close button. This topic deals with the same issue, but the solution described doesn't work for me, maybe because I don't have Elementor Pro, only the free version.

The popup on my site has a little close icon, in the developer console this close icon had the class "ue-simple-popup-close". I need an additional close button.

Is there a way to make this work using CSS, javascript or HTML? I could put a HTML widget into the popup and work from there for example. Or use the ue-simple-popup-close class to tell the button to do the same action as the little close X, but I'm not sure how to do that.

Looking forward to your answers and thank you in advance!

Regards, mh1

It told me to provide code, so this is all I got (it was also in the link):

<script> 
  jQuery( document ).ready( function( $ ) {
  $( document ).on( 'click', '.close-popup', function( event ) {
      elementorProFrontend.modules.popup.closePopup( {}, event );
   } );
 } );
</script>

I watched a bunch of tutorials on the matter, but 4 of them used the exact same code as presented IN HERE, and some others were for the pro version of elementor. With that it would be resolved in 1 minute, but this topic that seems trivial at first sight turns out to be quite complicated.

Solution

I found a solution myself. Here's what I used to make the popup:

Saved an elementor template for the popup content. Make a regular button inside the content to close the popup.
Used the plugin "unlimited Elements" for elementor, that enables a "Simple Popup" Widget, that triggers a popup upon a button click. Select the elementor popup template that you created in stept 1 as a source.

Now I discovered which class the X close button in the popup has: ue-simple-popup-close The solution to the problem: give my own close button this class, so it has the same properties as the X close button. Problem is, it is jammed at the top together with the regular X button. Give your own close button an additional class "close-button".

Then use this simple CSS code to pisition your own close button back in the middle. For my popup size this worked:

.close-button{
    padding-left:341px;
    padding-top:144px;
}

Depending on how wide your popup is, you have to jerk around the values.