I've been trying to implement bootstrap4 modal to my project and I want to use bootstrap4 modal on svg map. Basically I want to show modal when i click to a specific area on svg map. So far I read that I can use -a- tag and pass the class parameters within it but I wouldn't be able to accomplish anything. How can i do this? Thank you.
here is 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>
---Modal---
<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>
and JS code that I implemented from the sources I've read so far...
$('a[href$="#exampleModal"]').on( "click", function() {
$('#exampleModal').modal('show');
});
Try this:
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)*/
}
You can attach your click-events to the clickboxes and position the clickboxes over the regions you want.