Joomla Asked by ygiorgos on September 5, 2021
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?
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.
Correct answer by mickmackusa on September 5, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP