Search code examples
javascripthtmlcssmodal-dialogarea

Is it possible for an <area> to open a modal?

//Search in the HTML document for id Modal, id ModArea and class close
let modal = document.getElementById("Modal");

let btn = document.getElementById("ModArea");

let span = document.getElementsByClassName("close")[0];
// when ModArea is clicked
btn.onclick = function() {
  //make the modal visible
  modal.style.display = "block";
}
// when X is clicked
span.onclick = function() {
  //remove the modal
  modal.style.display = "none";
}
<img class="europe_img" src="https://mapswire.com/download/europe/europe-political-map-miller.jpg" usemap="#europe" alt="Europe">

<map name="europe">
    <!--Create an area for Iceland -->
    <area id="ModArea" target="" alt="Iceland (ISL)" title="Iceland (ISL)" href="" coords="138,388,35,540,232,748,549,585,516,374" shape="poly">
    <!--Create a modal -->
    <div id="Modal" class="modal">
        <!--Content of the modal: paragraph and closing button -->
        <div class="modal-content">
            <span class="close">&times;</span>
            <p>Modal Success</p>
        </div>
    </div>
</map>

i'm doing a project where I need to divide Europe in many different areas and put a couple of statistics about each country, since there are a lot of them I was thinking of creating a template modal and to fill the gaps using json, but it doesn't seem to work.

I tried simply making a modal and replacing the button section with the area section, but when I go and test it it shows only for a split-second before returning to the normal page.

Anyone has an idea on how I could solve this? (it's not strictly necessary to solve it with a modal, just anything that would let me show the informations on the same page in a sort of pop-up mode, instead of having to go to a different page altogether

Solution

  • found the solution: the problem was that href would still activate even if it was ="" (something I didn't know), so by just removing that and adding cursor: pointer; in css I can achieve the same effect and not have the pop-up immediately disappear.