圍繞我希望實作的功能尋找最佳實踐。
我有一張SVG地圖，其中包含用戶可以單擊的藍色小圖示，請參閱下圖以供參考：
當用戶單擊任何藍色圖示時，我希望通過它打開一個小模態，以顯示該區域資訊。例如，請參閱以下螢屏截圖：
所以，在上面的例子中，用戶點擊了底部的藍色圓圈，這會為該區域打開一個小模態。
現在，在我的 中svg，我為每個藍色圖示（<g id="uk" ...">，但使用這種方法，我看到的兩個選項是：
- 絕對定位每個區域的模態。但這聽起來像回應式的痛苦。
- 在其
svg自身內為模態撰寫重復標記。
兩者似乎都不是一個好方法。
有什么建議嗎？
這是我svg的參考：https : //jsfiddle.net/6squyc7d/（添加為 jsfiddle 因為粘貼代碼使我超過了字符限制）
uj5u.com熱心網友回復：
在onclick事件中，你可以使用X和Y坐標的絕對位置的模態動態。所以實際上你可以在onclick函式上創建和定位模態。
function openModal( evt ) {
var intCoordX = evt.clientX;
var intCoordY = evt.clientY;
// Modify modal properties
// Open modal
}
uj5u.com熱心網友回復：
對于每個點，您都有一個 ID。您可以使用 forEach 回圈（陣列中的所有 Id）為每個點添加一個 onclick 偵聽器。然后，您可以將此代碼放入 forEach 回圈中：
const dot = document.getElementById('canada')
dot.addEventListener('click', event => {
console.log(event.x, event.y)
});
在此代碼中，您會得到帶有 Id（加拿大）的點。然后你有點擊事件，你可以看到用戶在他們的螢屏上點擊的位置（x 和 y 像素）。
然后，您可以放置??一個具有頂部和左側值的絕對 div。
.position {
position: absolute;
opacity: 0;
}
然后，您可以使用 JS 將頂部和左側的模態放置在右側位置并將不透明度設定為 1；它將使 div 顯示在正確的位置。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/345839.html
標籤：javascript html 查询 css svg