Pop up AcyMailing subscription form

Question

I am trying to build a Joomla website with an AcyMailing subscription form.

I'd like the form to be a pop-up window. I have researched thoroughly and I have achieved most of what I want.

Now I have a pop-up form (as an AcyMailing subscription module), but the form closes when I click in the form.

When I click outside the form, it does nothing -- as desired.

Here is the code I am using:

<script>
// When the user clicks on <div>, open the popup
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}
</script>
<div class="popup" onclick="myFunction()">CLICK HERE TO SUBSCRIBE
    <span class="popuptext" id="myPopup">
        <table class="acym_form">
            *(the acy mailing form module here)*
        </table>     
    </span> 
</div>

Does anyone have a solution for this?

Answer 1

I see that you have modelled your development upon this page:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_class

However, that demo has a separation between the element with the click event and the element to be toggled.

Your snippet has the popup element nested inside of the clickable element (there is a parent-child relationship). Your issue pertains to the fact that clicking on the child(ren) will trigger the event listener bound to the parent.

This is a reproduction of your issue: https://jsfiddle.net/kcvdg73o/

To resolve the matter, you merely need to break the parent-child relationship that your popup currently has.

<div class="popup" onclick="myFunction()">CLICK HERE TO SUBSCRIBE</div>

will do the trick. If you move the </div> in my demo link, you will successfully eliminate the unwanted behaviour.