<area> 是否可以打开模式？

Question

//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>

我正在做一个项目，我需要将欧洲划分为许多不同的区域，并为每个国家提供一些统计数据，因为其中有很多我正在考虑创建一个模板模态并填充使用 json 的间隙，但它似乎不起作用。

我尝试简单地制作一个模式并将按钮部分替换为区域部分，但是当我去测试它时它只显示一瞬间就返回正常页面。

有人知道我该如何解决这个问题吗？（并不是绝对有必要用模态来解决它，只要能让我以某种弹出模式在同一页面上显示信息，而不必完全转到不同的页面就可以了

Answer 1

找到了解决方案：问题是 href 仍然会激活，即使它是 =""（我不知道），所以只需删除它并添加 cursor: pointer; 在 css 我可以实现同样的效果，而不是让弹出窗口立即消失。

<area> 是否可以打开模式？

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

html

javascript

css

modal-dialog

area