Using <a href..> tag as a bootstrap4 modal trigger for a svg map-CodePudding

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');
  });

CodePudding user response：

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.