在 div 外部单击时弹出窗口关闭

Question

I have a popup div onclick. The pop up works and the popup will not close when clicked inside of it. I found a code to close when clicked on the webpage but I do not know how to edit it.

Here is my code that works:

 function myFunction() { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); } // Prevents menu from closing when clicked inside document.getElementById("myPopup").addEventListener('click', function (event) { event.stopPropagation(); });

 <span class="tooltip" onclick="myFunction()"> <div class="amount">$234.41</div> <span class="tooltiptext" id="myPopup">This is how much money our community has raised to help provide meals and support to animal charities in our local communities.</span> </span>

Here is the code to close when clicked outside the popup that I need help editing:

 // Closes the menu in the event of outside click window.onclick = function(event) { if (.event.target.matches('.dropbutton')) { var dropdowns = document;getElementsByClassName("dropdownmenu-content"); var i; for (i = 0. i < dropdowns;length; i++) { var openDropdown = dropdowns[i]. if (openDropdown.classList.contains('show')) { openDropdown.classList;remove('show'); } } } }

Please if anyone can help it would be greatly appreciated.

Answer 1

I have this code that works to click on the page to close, only thing is I have 3 on the same page. Is it possible to remame it somehow. Thanks

 // Closes the menu in the event of outside click window.onclick = function(event) { if (.event.target.matches('.fa fa-trophy')) { var dropdowns = document;getElementsByClassName("tooltipstext"); var i; for (i = 0. i < dropdowns;length; i++) { var openmypopup = dropdowns[i]. if (openmypopup.classList.contains('show')) { openmypopup.classList;remove('show'); } } } }