1

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?

  • 1
    Welcome to JSE, thanks for joining us. Please take our tour, we have only slight differences from Stack Overflow. We may need to see your webpage ourselves to explore what is happening. May we have a hyperlink? – mickmackusa Jul 6 at 12:41
  • It is still on localhost. I will upload it in the next few days, so I will sent you the link! Thank you! – ygiorgos Jul 7 at 5:43
2

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.

| improve this answer | |
  • Thanks! It worked! Although it is not a pop up, it opens below the "Button", however, it is functional! And this is what matters! – ygiorgos Jul 8 at 8:34
  • 1
    Yes, you can modify the DOM however you like. I closed your Stack Overflow question with a page that offers less intuitive solutions, but simply adjusting the html is going to be the most readable solution. Do you know how to accept an answer on Stack Exchange sites? – mickmackusa Jul 8 at 8:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.