我一直在嘗試在我的專案中實作 bootstrap4 模態，我想在 svg 地圖上使用 bootstrap4 模態。基本上，當我單擊 svg 地圖上的特定區域時，我想顯示模態。到目前為止，我讀到我可以使用 -a- 標簽并在其中傳遞類引數，但我無法完成任何事情。我怎樣才能做到這一點？謝謝你。
這是 html
<a data-mdb-target="#exampleModal" onclick="return false" data-mdb-toggle="modal" >
<g id="ege" class="region" data-bolgeadi="Ege B?lgesi">
<path>
.
.
</g>
</a>
---模態---
<div class="modal top fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-mdb-backdrop="true" data-mdb-keyboard="true">
<div class="modal-dialog modal-xl ">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
和我從迄今為止閱讀的來源實作的 JS 代碼......
$('a[href$="#exampleModal"]').on( "click", function() {
$('#exampleModal').modal('show');
});
uj5u.com熱心網友回復：
嘗試這個：
HTML：
<svg>
<!--Your SVG code here-->
</svg>
<div id="clickbox-1"></div>
CSS：
#clickbox-1{
position: absolute;
top: /*y pos*/;
left: /*x pos*/;
width: 100px; /*You can change the sizes*/
height: 100px;
/*OPTIONAL clip-path: path(some path data here)*/
}
您可以將您的點擊事件附加到點擊框并將點擊框放置在您想要的區域上。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312326.html
標籤：javascript html svg 触发器 引导模式
下一篇：png或svg影像的顫動波紋效果